フレックスアイテムが過去のコンテンツサイズを縮小しないのはなぜですか？

フレックスボックスの列が4つあり、すべてが正常に動作しますが、列にテキストを追加して大きなフォントサイズに設定すると、フレックスプロパティにより、列が必要以上に広くなります。

私が使用しようword-break: break-wordとしましたが、それでも役に立ちましたが、列のサイズを非常に小さい幅に変更すると、テキストの文字が複数行に分割され（1行に1文字）、それでも列の幅は1文字のサイズより小さくなりません。

このビデオを見てください （最初は最初の列が最小ですが、ウィンドウのサイズを変更すると、それが最も広い列になります。フレックス設定を常に尊重したいので、フレックスサイズ1：3：4：4）

私は知っています、フォントサイズと列のパディングをより小さく設定することは助けになります...

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

JSFiddle

.container {
  display: flex;
  width: 100%
}
.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}
.col1 {
  flex: 1;
  background: orange;
  font-size: 80px
}
.col2 {
  flex: 3;
  background: yellow
}
.col3 {
  flex: 4;
  background: skyblue
}
.col4 {
  flex: 4;
  background: red
}

<div class="container">
  <div class="col col1">Lorem ipsum dolor</div>
  <div class="col col2">Lorem ipsum dolor</div>
  <div class="col col3">Lorem ipsum dolor</div>
  <div class="col col4">Lorem ipsum dolor</div>
</div>

フレックスアイテムの自動最小サイズ

フレックスボックスのデフォルト設定が発生しています。

フレックスアイテムは、主軸に沿ったコンテンツのサイズよりも小さくすることはできません。

デフォルトは...

• min-width: auto
• min-height: auto

...行方向と列方向のフレックスアイテムのそれぞれ。

これらのデフォルトを上書きするには、フレックスアイテムを次のように設定します。

• min-width: 0
• min-height: 0
• overflow: hidden（またはを除くその他の値visible）

フレックスボックス仕様

4.5。フレックスアイテムの自動最小サイズ

フレックスアイテムにより適切なデフォルトの最小サイズを提供するために、この仕様autoでは、CSS 2.1で定義されているプロパティmin-widthとmin-heightプロパティの初期値として新しい値を導入しています。

auto値に関して...

そのフレックス項目にoverflowあるvisibleフレックスアイテムの主軸最小サイズのプロパティで指定されたときにメイン軸に、指定自動最小サイズ。それ以外の場合はに計算され0ます。

言い換えると：

• min-width: autoそしてmin-height: autoデフォルトはときにのみ適用されoverflowていますvisible。
• overflow値がでない場合、visiblemin-sizeプロパティの値は0です。
• したがって、およびのoverflow: hidden代わりになることができます。min-width: 0min-height: 0

そして...

• 最小サイズ変更アルゴリズムは、主軸にのみ適用されます。
• たとえば、行方向コンテナのフレックスアイテムは、min-height: autoデフォルトでは取得されません。
• 詳細については、この投稿を参照してください。
  • フレックス方向で異なる最小幅のレンダリング：行とフレックス方向：列

min-width：0を適用しましたが、アイテムはまだ縮小しませんか？

ネストされたFlexコンテナー

HTML構造の複数のレベルでフレックスアイテムを処理している場合は、上位レベルのアイテムのデフォルトのmin-width: auto/ をオーバーライドする必要がある場合がありmin-height: autoます。

基本的に、でより高いレベルのflexアイテムは、でmin-width: autoネストされたアイテムの縮小を防ぐことができますmin-width: 0。

例：

• フレックスアイテムは、コンテンツよりも小さく縮小されていません
• 子供を親に合わせる
• ホワイトスペースのcssプロパティがフレックスの問題を引き起こしています

ブラウザのレンダリングに関する注意

• Chrome対Firefox / Edge

  2017年以降、Chromeは（1）min-width: 0/ min-height: 0デフォルトに戻すか、（2）0ミステリーアルゴリズムに基づいて特定の状況でデフォルトを自動的に適用しているようです。（これは彼らが介入と呼んでいるものかもしれません。）その結果、多くの人々は彼らのレイアウト（特に望ましいスクロールバー）がChromeでは期待通りに動作するのを見ていますが、Firefox / Edgeでは見えません。この問題については、ここで詳しく説明します：FirefoxとChromeの間のflex-shrinkの不一致

• IE11

  仕様に記載されているように、およびプロパティのauto値は「新規」です。つまり、一部のブラウザーは、値が更新される前にフレックスレイアウトを実装し、CSS 2.1およびCSS 2.1の初期値であるため、デフォルトでまだ値をレンダリングする可能性があります。そのようなブラウザーの1つがIE11です。その他のブラウザは、フレックスボックスの仕様で定義されている新しい値に更新されています。min-widthmin-height00min-widthmin-heightauto

改訂されたデモ

.container {
  display: flex;
}

.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}

.col1 {
  flex: 1;
  background: orange;
  font-size: 80px;
  min-width: 0;   /* NEW */
}

.col2 {
  flex: 3;
  background: yellow
}

.col3 {
  flex: 4;
  background: skyblue
}

.col4 {
  flex: 4;
  background: red
}

<div class="container">
  <div class="col col1">Lorem ipsum dolor</div>
  <div class="col col2">Lorem ipsum dolor</div>
  <div class="col col3">Lorem ipsum dolor</div>
  <div class="col col4">Lorem ipsum dolor</div>
</div>

jsFiddle