[解決済み] フレックスアイテムがコンテンツサイズ以上に縮小されないのはなぜですか？

2022-03-22 05:30:22

質問

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

試しに word-break: break-word で、それは役に立ちましたが、それでも、カラムを非常に小さな幅にリサイズすると、テキストの文字が複数の行に分割され（1行に1文字）、しかもカラムは1文字のサイズより小さな幅になりません。

こちらをご覧くださいビデオ (開始時は1列目が一番小さいですが、ウィンドウサイズを変更したら一番広い列になってしまいました。ただ、フレックス設定は常に尊重したい。フレックスサイズ1 : 3 : 4 : 4)

font-sizeとcolumn paddingを小さく設定すれば解決するのは分かっているのですが...他に解決策はないのでしょうか？

を使用することはできません。 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. Flexの自動最小サイズアイテム

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

に関しては auto 値...

フレックスアイテムで overflow は visible を主軸にした場合、フレックスアイテムの主軸min-sizeプロパティで指定した場合は 自動最小サイズ . それ以外の場合は、次のように計算されます。 0 .

つまりは

は min-width: auto と min-height: auto の場合のみ、デフォルトが適用されます。 overflow は visible .
もし overflow の値が visible の場合、min-sizeプロパティの値は 0 .
したがって overflow: hidden の代用になります。 min-width: 0 と min-height: 0 .

と...

最小サイジングアルゴリズムは、主軸にのみ適用されます。
例えば、行方向コンテナ内のフレックスアイテムには min-height: auto をデフォルトで使用します。
より詳細な説明はこちらの記事をご覧ください。
- flex-direction: row と flex-direction: column で min-width のレンダリングが異なる。

min-width: 0を適用しても、アイテムが縮小されない？

ネストしたFlexコンテナ

HTML構造の複数の階層でフレックスアイテムを扱う場合、デフォルトの min-width: auto / min-height: auto より高いレベルのアイテムに

基本的に、上位のフレックスアイテムに min-width: auto でネストされたアイテムが縮小されるのを防ぐことができます。 min-width: 0 .

例

フレックスアイテムがコンテンツより小さく縮んでいないこと
親に子を合わせる
ホワイトスペースのCSSプロパティがフレックスで問題を起こしている

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

Chrome vs. Firefox / Edge

少なくとも2017年以降、Chromeは、（1）元に戻すか、（2）元に戻すかのどちらかのようです。 min-width: 0 / min-height: 0 のデフォルトを適用するか、あるいは、(2) 自動的に 0 は、謎のアルゴリズムに基づき、特定の状況下でデフォルトを設定します。(これは、彼らが言うところの介入 .) その結果、多くの人が、Chrome ではレイアウト（特に目的のスクロールバー）が期待どおりに動作するのに、Firefox / Edge では動作しないことを確認しています。この問題については、こちらで詳しく解説しています。 FirefoxとChromeのflex-shrinkの不一致
IE11

仕様書に記載されているように auto の値は min-width と min-height プロパティは "new"です。このため、一部のブラウザでは 0 これは、値が更新される前にフレックスレイアウトを実装していたためで 0 は初期値として min-width と min-height で CSS 2.1 . そのようなブラウザの一つがIE11です。他のブラウザは、より新しいものにアップデートしています。 auto の値で定義されています。フレックスボックス仕様 .

改訂版デモ

.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