Flex conteneur avec divs enfants ne pas empiler horizontalement

Question

Je suis assez nouveau à flexbox, et ne peux pas comprendre comment faire ce que je suis en train d'essayer. Je voudrais que le contenu répété s'empile horizontalement vers la droite. Je voudrais que les éléments soient rétrécis pour s'adapter à la largeur du contenu (si le texte de l'id de titre/rapport est plus long/plus court). J'essaie de rendre la boîte rouge aussi large que le contenu et la pile vers la droite. La boîte violette (conteneur) est flexible. Il semble que le div rouge soit le coupable que je ne peux pas comprendre. J'ai essayé de convertir en bloc en ligne et joué avec le flex-grow et flex-shrink, mais rien ne semble fonctionner pour moi. Il pourrait y avoir un style quelque part ailleurs dans le projet qui est en concurrence, mais pas sûr de ce qu'il faut rechercher si tel est le cas ...

Styles du conteneur violet div:

line-height: 1.5; 
display: flex; 
flex-direction: column; 
max-height: 22.8125rem; 
padding-bottom: .5rem; 
margin-bottom: 1rem; 
background-color: #394b54; 
flex-basis: 100%; 
-webkit-box-flex: 1; 
flex-grow: 1; 

Answer 1

Je voudrais que le contenu répété à pile horizontalement vers la droite

Utilisez la valeur par défaut flex-direction: row.

je voudrais les éléments à se rétrécir à la largeur du contenu

Utiliser la valeur par défaut flex-grow: 0 et flex-basis: content.