5

2 つのフレックス アイテムでフレックス レイアウトを使用しようとしています。

  • フレックス アイテム 1 は、実行時に動的コンテンツで埋められます (内部コンテンツと同じ大きさにする必要があります)。
  • Flex アイテム 2 は残りのスペースを取る必要があります

どういうわけか、Firefox（およびChrome）は子要素の内側の幅を無視しているため、要素が重なり合っています（IEは期待どおりに動作します）（Fiddle）：

<div style="display: flex;">
    <!-- As suggested at https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes -->
    <div style="min-width: auto">
        <div style="width: 200px; background-color: green;">Dynamic Content</div>
    </div>
    <div style="flex-grow: 1; border: 1px solid #888;">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
</div>

200px の幅は単なる例です。実行時の正確な幅はわかりません。

Developer Mozillaで私も見つけました

フレックス アイテムの妥当なデフォルトの最小サイズを確保するには、min-width:auto および/または min-height:auto を使用します。フレックス アイテムの場合、auto 属性値はアイテムの最小幅/高さがそのコンテンツの幅/高さ以上になるように計算し、アイテムがコンテンツを保持するのに十分な大きさでレンダリングされることを保証します。詳細については、min-width と min-height を参照してください。

さまざまな値で実験しましたが、結果は同じでした。

これは仕様によるものですか、それとも CSS フレックス ボックスがコンテンツよりも小さくなるのを防ぐにはどうすればよいですか?

編集: これは Firefox / Chrome で適切に実装されているようです。

4

2 に答える 2

0

両方の列が重要な場合はmax-width、幅を増減するために使用できます。

ワーキングデモ

コード

<div style="display: flex; width:100%;">
    <div style="max-width: 50%">
        <div style="background-color: green;">Dynamic Content</div>
    </div>
    <div style="border: 1px solid #888; max-width: 50%;">
        Lorem ipsum dolor sit amet
    </div>
</div>
于 2014-01-03T07:30:19.027 に答える
0

flexを無視してこれを使用してください：

<div style="width:100%;">
<!-- As suggested at https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes -->
<div style="min-width: auto">
    <div style="width: 200px; background-color: green;">Dynamic Content</div>
</div>
<div style="flex-grow: 1; border: 1px solid #888;">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>

幅を 100% に設定すると、次の項目は最初の項目の下になります。内部コンテンツに別の div を使用したため、必要なスペースが必要になります...

于 2014-01-03T05:13:53.473 に答える