web-dev-qa-db-ja.com

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

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

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

これを見てください video （最初は最初の列が一番小さいのですが、ウィンドウをリサイズしたときは一番広い列です。常にフレックス設定を尊重したい、フレックスサイズ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>
htmlcsscss3flexbox
203
tomas657

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

あなたはflexboxのデフォルト設定に遭遇しています。

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

デフォルトは...

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

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

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

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

Flexboxの仕様

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

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

autoname__の値について…

主軸のoverflowname__がvisiblename__であるフレックスアイテムでは、フレックスアイテムの主軸のmin-sizeプロパティで指定すると、自動最小サイズを指定します。それ以外の場合は0に計算されます。

言い換えると：

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

そして...

Min-width：0を適用しましたが、それでもアイテムは縮小されませんか？

ネストされたFlexコンテナ

HTML構造の複数レベルのフレックスアイテムを扱う場合は、より高いレベルのアイテムでデフォルトのmin-width: auto/min-height: autoをオーバーライドする必要があるかもしれません。

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

例：

ブラウザレンダリングノート

  • ChromeとFirefox/Edge

    少なくとも2017年以降、Chromeは（1）デフォルトのmin-width: 0/min-height: 0に戻すか、（2）謎のアルゴリズムに基づいて特定の状況で自動的に0デフォルトを適用するように見えます。 （これが 介入 と呼ばれるものかもしれません。）その結果、多くの人がレイアウトを見ています（特に望ましいスクロールバー）。 ）Chromeでは期待どおりに動作しますが、Firefox/Edgeでは動作しません。この問題については、ここで詳しく説明します。 FirefoxとChromeのフレックス・シュリンクの相違

  • IE11

    仕様に記載されているように、min-widthおよびmin-heightプロパティのautoname__値は "new"です。つまり、ブラウザによっては、デフォルトで0値がレンダリングされることがあります。これは、値が更新される前にフレックスレイアウトを実装し、0が CSS 2.1 のmin-widthおよびmin-heightの初期値であるためです。 そのようなブラウザの1つがIE11です。flexbox spec で定義されているように、他のブラウザは新しいautoname__値に更新されました。

改訂デモ

.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

345
Michael_B