divs子が水平に積み重ねられていないフレックスコンテナ

Question

フレックスボックスは新しく、私がしようとしていることをする方法を理解することができません。私は繰り返しコンテンツを水平に横に積み重ねてほしい。コンテンツの幅に合わせてアイテムを縮小したい（タイトル/レポートIDのテキストが長い/短い場合）。私は赤いボックスをコンテンツの幅だけにして、右に積み重ねようとしています。紫色の箱（コンテナ）はフレックスです。赤いdivが私が把握できない犯人のように思える。私はインラインブロックに変換しようとしましたが、flex-growとflex-shrinkで再生しましたが、何も私にとってはうまくいかないようです。

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

：...紫色のコンテナのdivの

スタイル競合しているプロジェクト内の他のどこかのスタイルが、そのような場合のために見てわからないがあるかもしれません

繰り返しコンテンツを水平に右に積み重ねてほしい

デフォルトのflex-direction: rowを使用してください。

私はデフォルトflex-grow: 0とflex-basis: contentを使用したコンテンツ

の幅に合わせて縮小するアイテムをしたいと思います。