Flex アイテムがコンテンツサイズに合わせて縮まない理由

html css flexbox


4つのflexboxカラムを持っていますが、すべてが正常に動作しています。

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>





Answer 1 Michael_B


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

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

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

デフォルトは

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

...行方向と列方向にそれぞれフレックスアイテムを配置します。

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

  • min-width: 0
  • min-height: 0
  • overflow: hidden (または他の任意の値、 visible を除く)

フレックスボックス仕様

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

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

auto 値に関して...

主軸に overflowvisible されるフレックス項目で、フレックス項目の主軸のmin-sizeプロパティで指定されている場合自動最小サイズを指定します 。 それ以外の場合は 0 に計算されます 。

言い換えれば

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

and...


min-width:0を適用してもアイテムが縮まない?

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

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

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

Examples:


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

  • Chrome対Firefox / Edge

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

  • IE11

    仕様に記載されているように、 min-width および min-height プロパティの auto 値は「新しい」です。 つまり、一部のブラウザーは、値が更新される前にフレックスレイアウトを実装し、 0CSS 2.1の min-width および min-height の初期値であるため、デフォルトで 0 値をレンダリングする可能性があります。 そのようなブラウザーの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