☰

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

tag-icon • tag-icon html css flexbox
フレックスアイテムがコンテンツサイズを超えて縮小されないのはなぜですか? 質問する

フレックスボックスの列が 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>

ベストアンサー1

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

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

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

デフォルトは...

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

...それぞれ行方向と列方向のフレックス項目用です。

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

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

フレックスボックス仕様

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

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

価値に関してはauto...

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

言い換えると：

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

そして...

min-width: 0 を適用したのに、アイテムがまだ縮小されませんか?

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

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

基本的に、 を持つ上位レベルの flex アイテムは、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 の flex-shrink の不一致

  • IE11

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

おすすめ記事