CSSフレックスアイテムがコンテンツよりも小さくなるのを防ぐにはどうすればいいですか？

Question

私は2つのフレックス項目とフレックスレイアウトを使用しようとしている：

• Flexの項目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で

は私も使用し、フレックス項目のための合理的なデフォルトのminumumのサイズを確保するために

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

私は異なる値で実験しましたが、結果は同じでした。

これは設計によるのですか、どのようにしてCSSフレックスボックスの内容が小さくなるのを防ぐことができますか？

編集：これはFirefox/Chromeで正しく実装されているようです。

Answer 1

はちょうどフレックス無視して、これを使用する：

<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％に幅を設定

は、次の項目は、最初の1の下になります。 内部コンテンツ用に別のdivを使用していたため、必要なスペースが必要になります。

Answer 2

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

Working Demo

コード

<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>