☰

フレックスアイテムがコンテナから溢れるのを防ぐ 質問する

tag-icon • tag-icon css flexbox
フレックスアイテムがコンテナから溢れるのを防ぐ 質問する

articleこの例では、フレックス アイテム ( )がフレックス親/コンテナー ( )からオーバーフローしflex-grow: 1; ないようにするにはどうすればよいですか?main

この例ではarticleテキストのみですが、他の要素 (tableなど) が含まれている場合もあります。

main, aside, article {
  margin: 10px;
  border: solid 1px #000;
  border-bottom: 0;
  height: 50px;
}
main {
  display: flex;
}
aside {
  flex: 0 0 200px;
}
article {
  flex: 1 0 auto;
}
<main>
  <aside>x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x </aside>
  <article>don't let flex item overflow container.... y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y </article>
</main>

ベストアンサー1

私の場合は、min-width: 0;オーバーフローする div に単に追加するだけでオーバーフローを防ぐことができました。

article {
  min-width: 0;
}

説明：

min-widthフレックス コンテキストの場合: デフォルトmin-width値は0(ゼロ) ですが、フレックス アイテムの場合は ですauto。これにより、ブロック要素が必要以上に多くのスペースを占め、オーバーフローが発生する可能性があります。

min-widthは競合する に勝つように定義されておりwidth、max-widthつまり、要素の幅が暗黙の自動幅を下回るとすぐに が作動し、min-width:auto要素が縮小しないようにします。

修正方法は明らかです:min-width: 0

これは、この要素が最小幅を占める権利がないことをブラウザに伝え、使用可能な幅のみを占めて適切にレンダリングされるようになります。

注意flex-shrink: flex-shrink はここでは役立つように思えますが、実際には役に立ちません。説明されている問題は、要素のコンテンツに基づいた要素のサイズ設定に関するものですが、flex-shrink は同じコンテキスト内の他の flex 要素に対する相対的な縮小を定義します。ソース

おすすめ記事