フレックスアイテムがコンテンツサイズを超えて縮小しないのはなぜですか?

Question

Flexbox 列が 4 つあり、すべて正常に動作しますが、列にテキストを追加して大きなフォント サイズに設定すると、Flex プロパティにより列が本来よりも広くなってしまいます。

word-break:break-word を使用してみましたが、列のサイズを非常に狭い幅に変更すると、テキスト内の文字が複数の行に分割されました (1 行)ただし、列幅は文字のサイズ以上になります。

このビデオを見る (最初は最初の列が最小ですが、ウィンドウのサイズを変更すると、それが最も幅の広い列になります。常に Flex 設定を尊重したいだけです。Flex サイズは 1:3:4:4)

フォント サイズと列のパディングを小さく設定すると解決することはわかっていますが、他に解決策はありますか?

overflow-x:hidden は使用できません。

JSFiddle

.container {
  ディスプレイ: フレックス;
  幅: 100%
}
.col {
  最小高さ: 200px;
  パディング: 30px;
  単語の区切り: 単語の区切り
}
.col1 {
  フレックス: 1;
  背景: オレンジ;
  フォントサイズ: 80px
}
.col2 {
  フレックス: 3;
  背景: 黄色
}
.col3 {
  フレックス: 4;
  背景: スカイブルー
}
.col4 {
  フレックス: 4;
  背景: 赤
}

<div class="container">
  <div class="colcol1">ロレム・イプサム・ドール</div>
  <div class="colcol2">ロレム・イプサム・ドール</div>
  <div class="colcol3">ロレム・イプサム・ドール</div>
  <div class="colcol4">ロレム・イプサム・ドール</div>
</div>

Answer 1

Flex と Grid が何年も私を悩ませてきたことがわかったので、次のことを提案します:

リーリー

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

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

リーリー

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

Answer 2

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

Flexbox のデフォルト設定が表示されました。

フレキシブル項目は、主軸に沿ったコンテンツのサイズより小さくすることはできません。

デフォルト値は...

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

...行方向と列方向のそれぞれの伸縮性アイテムの場合。

フレックス項目を次のように設定することで、これらのデフォルトをオーバーライドできます。

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

---

フレックスボックス仕様

概要自動値...

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

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

たとえば、行指向コンテナ内の Flex アイテムは、デフォルトでは

min-height: auto

を取得しません。
詳細な手順については、次の投稿を参照してください。
• 曲げ方向: 行と曲げ方向: 列の最小幅は別の方法で表示されます
• min-width: 0 を適用しましたが、プロジェクトはまだ縮小しませんか?

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

---

HTML 構造の複数のレベルで Flex プロジェクトを操作している場合は、デフォルトの

min-width: auto / min-height: auto

をオーバーライドすることもできます。より高いレベルのアイテム。

基本的に、min-width: auto を持つ上位レベルの Flex プロジェクトは、 code>min-width: 0

を持つ下にネストされたプロジェクトの縮小を防ぎます。

＃＃＃例：＃＃＃ Flex アイテムは内容よりも小さく縮小しません

子供を親に合わせる

• 空白の CSS プロパティは Flex で問題を引き起こす可能性があります
ブラウザのレンダリング手順

Chrome と Firefox / Edge

---

少なくとも 2017 年以降、Chrome は (1)

min-width: 0
• /

  min-height: 0 のデフォルトに戻すか、(2) に基づいているようです。謎のアルゴリズム 0

  デフォルト値が自動的に適用される場合があります。 (これはおそらく、

  介入と呼ばれるものです。)非常に多くの人が、レイアウト (特に必要なスクロールバー) が Chrome では期待どおりに機能しているのを確認していますが、Firefox/Edge ではそうではありません。この問題については、こちらで詳しく説明しています: Flex-shrink の Firefox と Chrome の違い IE11

  仕様に記載されているように、min-width および min-height プロパティの auto 値は「新規」です。これは、一部のブラウザでは、値を更新する前に Flex レイアウトを実装しており、0 が min 0 値が表示される可能性があることを意味します。 "http://www.w3.org/TR/CSS2/visudet.html#min-max-widths" rel=" -widthCSS 2.1## ＃。 IE11 はそのようなブラウザです。 他のブラウザは、フレックスボックス仕様で定義された新しい auto 値に更新されました。中定义的 auto

---

修正されたデモ

リーリー リーリー