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

Question

こんにちは、CSS について質問があります。 2 つの列があり、右 (B) 列の幅は 100 ピクセルに固定されており、左 (A) 列は残りの幅を満たす必要があります。さらに、列 A 内には、水平方向に追加されたサブコンポーネントのリストがあります。

問題は、子コンポーネントを追加すると、列 A の幅が長くなり、列 B の幅が低くなることです。

サブコンポーネントが列 A の幅を超える場合、列 A の最下行にサブコンポーネントを追加するにはどうすればよいですか?

• 子要素の数が少ない場合
• 子要素が増えた場合(そのまま)
• 子要素が増えた場合(TO-BE)

Answer 1

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

＃＃＃例：＃＃＃

リーリー リーリー

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

Answer 2

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

リーリー リーリー