flex:auto 要素のサブリストの幅を設定する方法

Question

こんにちは、CSS に問題があります。 2 つの列があり、右 (B) 列の幅は 100 ピクセルに固定されており、左 (A) 列は残りの幅を満たす必要があります。さらに、列 A 内には、水平方向に追加されたサブコンポーネントのリストがあります。問題は、子コンポーネントを追加すると、列 A の幅が長くなり、列 B が低くなることです。サブコンポーネントが列 A の幅を超える場合、列 A の最下行にサブコンポーネントを追加できるようにするにはどうすればよいですか?子要素が少ない場合 子要素が増える場合（現状） 子要素が増える場合（TO-BE）

P粉146080556 · Answer

Flex の代わりに表示グリッドを使用できます。グリッドを使用すると、項目が動的であるか静的であるかを定義できます。

＃＃＃例：＃＃＃

リーリーリーリー

grid-template-columns の 1fr は空きスペースを表します。これは、2 番目の要素の 100px を除くすべてのスペースが最初の要素で埋められることを意味します。

P粉419164700 · Answer

コンテナ全体と A の両方でフレックスラップを使用し、A ボックスの幅を calc(100% - 100px) に設定します。

リーリーリーリー