フレックスアイテムをコンテンツサイズよりも小さくできないのはなぜですか?

Question

<p>フレックスボックス列が 4 つあり、すべて正常に動作しますが、1 つの列にテキストを追加して大きなフォント サイズに設定すると、フレックス プロパティにより列が本来よりも広くなってしまいます。 </p> <p><code>word-break:break-word</code> を使用してみましたが、列のサイズを非常に狭い幅に変更すると、テキスト内の文字が複数の行に分割されてしまいます（1 行）ただし、列の幅は文字のサイズより小さくなることはありません。 </p> <p> このビデオをご覧ください (最初は最初の列が最小ですが、ウィンドウのサイズを変更すると、それが最も幅の広い列になります。常にフレックス設定を尊重したいだけです。フレックス サイズは 1:3 です: 4 :4)

<p>フォント サイズと列のパディングを小さい値に設定すると効果があることはわかっていますが、他に解決策はありますか? </p> <p><code>overflow-x:hidden</code> は使用できません。 </p> <p>JSFiddle</p> <p><br /></p> <pre class="brush:css;toolbar:false;">.container { ディスプレイ: フレックス; 幅: 100% } .col { 最小高さ: 200px; パディング: 30px; 単語の区切り: 単語の区切り } .col1 { フレックス: 1; 背景: オレンジ; フォントサイズ: 80px } .col2 { フレックス: 3; 背景: 黄色 } .col3 { フレックス: 4; 背景: スカイブルー } .col4 { フレックス: 4; 背景: 赤 }</pre> <pre class="brush:html;toolbar:false;"><div class="container"> <div class="colcol1">ロレム・イプサム・ドール</div> <div class="colcol2">ロレム・イプサム・ドール</div> <div class="colcol3">ロレム・イプサム・ドール</div> <div class="colcol4">ロレム・イプサム・ドール</div> </div></pre> <p><br /></p>

Answer 1

過去数年間、フレックスとグリッドの両方でこれが何度も問題を引き起こしていることがわかったので、次のことをお勧めします:

リーリー

この動作が必要な場合は、min-width: auto または min-height: auto を使用してください。

実際、ボックスのサイズ変更を追加して、すべてのレイアウトをより合理的にすることもできます:

リーリー

何か奇妙な結果があるかどうか知っている人はいますか?上記の方法を数年間使用してきましたが、何も問題はありませんでした。実際、フレックス/グリッドからコンテンツに向かうのではなく、コンテンツから外側に向かってフレックス/グリッドにレイアウトしたいという状況は思いつきません。そのような状況が存在するとしても、それは確かにまれです。したがって、これは悪いデフォルトのように感じられます。しかし、もしかしたら私は何かを見逃しているでしょうか？

Answer 2

Flex プロジェクトの自動最小サイズ

フレックスボックスのデフォルト設定が表示されました。

Flex アイテムは、主軸上のコンテンツのサイズより小さくすることはできません。

デフォルト設定は...

• 最小幅: 自動
• 最小高さ: 自動

...行方向と列方向のフレックス項目にそれぞれ適用されます。

フレックス項目を次のように設定できます:

• 最小幅: 0
• 最小高さ: 0
• オーバーフロー: hidden (または visible を除くその他の値)

---

フレックスボックス仕様

概要自動値...

＃＃＃言い換えると：＃＃＃

min-width: auto
• および min-height: autoデフォルトは、overflow が visible の場合にのみ適用されます。 #overflow
の値が
• visible でない場合、min-size 属性の値は 0 です。 したがって、overflow: hidden
は、
• min-width: 0 と min-height: 0 を置き換えることができます。 ＃＃＃同様に...＃＃＃
最小サイズのアルゴリズムはスピンドルにのみ適用されます。

たとえば、行方向コンテナ内のフレックス項目は、デフォルトでは

min-height: auto

を取得しません。
さらに詳しい説明については、次の投稿を参照してください。
• min-width は、flex-direction: row と flex-direction: column
• で異なる方法でレンダリングされます。
  min-width: 0 を適用しましたが、プロジェクトはまだ縮小されませんか?

ネストされたフレックスコンテナ

---

HTML 構造の複数のレベルでフレックス項目を使用している場合は、デフォルトの

min-width: auto / min-height: auto## を上位レベルでオーバーライドする必要がある場合があります。項目番号。

基本的に、min-width: auto を持つ上位レベルのフレックス項目は、min-width: 0 を持つ下のネストされた項目の縮小を防ぐことができます。

＃＃＃例：＃＃＃

Flex アイテムは内容より小さく縮小することはできません

子要素を親要素に適応させる

• 空白 CSS プロパティがフレックス レイアウトと競合します
• ブラウザレンダリングに関する考慮事項
Chrome と Firefox / Edge

---

2017 年以降、Chrome は (1)

min-width: 0

/
• min-height: 0

  のデフォルト値に戻るか、(2) 謎のアルゴリズムは、特定の状況においてデフォルト値 0 を自動的に適用します。 (これはおそらく、

  介入と呼ばれるものです。) 非常に多くの人が、レイアウト (特に予想されるスクロールバー) が Chrome では期待どおりに動作するのに、Firefox では動作しない/動作しないと感じています。角。詳細については、こちらを参照してください: Firefox と Chrome のフレックスシュリンクの違い IE11

  仕様に記載されているように、min-width および min-height プロパティの auto 値は「新規」です。これは、一部のブラウザでは、値が更新される前にフレックス レイアウトが実装されており、0 が CSS 2.1 に含まれているため、デフォルトで 0 値が表示される可能性があることを意味します。 min-width と min-height の値。 IE11 もその 1 つです。 他のブラウザは、flexbox 仕様で定義された新しい auto 値に更新されました。

---

改訂されたデモ

リーリー リーリー