フレックスコンテンツは親グリッド要素の幅を強制できますか？

Question

私は3つの部分で構成された全幅成分を持っています。中央の幅はその（固定された）内容（文字列）によって駆動され、中央の要素からは左右に2つの枠があり、 。

それを行う1つの方法はgridディスプレイを使用してgrid-template-columns: 1fr auto 1fr;として列を設定することです：

#container { 
 
    display: grid; 
 
    grid-template-columns: 1fr auto 1fr; 
 
}

<div id="container"> 
 
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultricies at quam vel efficitur. Donec dictum lorem eu dolor pulvinar facilisis. Fusce mollis egestas orci et consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur 
 
    pulvinar, sem nec eleifend tincidunt, neque eros porttitor arcu, nec porttitor sem felis id risus. Nulla posuere, lectus vitae auctor rhoncus, metus purus pellentesque ante, vel interdum ex metus eget nisl. Nunc feugiat ipsum pharetra, ultricies justo 
 
    ac, condimentum risus. 
 
    </div> 
 
    <div>hello</div> 
 
    <div>world</div> 
 
</div>

期待どおりに動作します：中央の要素は、そのスペースをとり、両方のペイン（lorem ipsumおよびワールド）は、残りの1つを等しく共有します。

私の実際のアプリケーションでは、左と右のペインには、display: flexによって駆動される要素が埋め込まれています。このセットアップが1frことになっているが、構成要素は、以下の例のように、それを埋めるように拡張された親要素の幅をオーバーライドするように見えます：

#container { 
 
    width: 600px; 
 
    display: grid; 
 
    grid-template-columns: 1fr auto 1fr; 
 
} 
 

 
#lpane { 
 
    display: flex; 
 
    flex-direction: row; 
 
}

<div id="container"> 
 
    <div id="lpane"> 
 
    <div>something</div> 
 
    <div>something</div> 
 
    <div>something</div> 
 
    <div>something</div> 
 
    <div>something</div> 
 
    <div>something</div> 
 
    <div>something</div> 
 
    <div>something</div> 
 
    <div>something</div> 
 
    <div>something</div> 
 
    <div>something</div> 
 
    </div> 
 
    <div>hello</div> 
 
    <div>world</div> 
 
</div>

なぜそうですか？親要素が1frという設定に実際に従い、flex要素（親の幅によって制限された新しい行に流れ込むはずである）で埋められるので、展開しないように強制する方法はありますか？

Answer 1

コンテナは問題ありません。コンテンツがあふれているだけです。 auto`：

は

#container { 
 
    width: 600px; 
 
    display: grid; 
 
    grid-template-columns: 1fr auto 1fr; 
 
} 
 

 
#lpane { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
}

<div id="container"> 
 
    <div id="lpane"> 
 
    <div>something</div> 
 
    <div>something</div> 
 
    <div>something</div> 
 
    <div>something</div> 
 
    <div>something</div> 
 
    <div>something</div> 
 
    <div>something</div> 
 
    <div>something</div> 
 
    <div>something</div> 
 
    <div>something</div> 
 
    <div>something</div> 
 
    </div> 
 
    <div>hello</div> 
 
    <div>world</div> 
 
</div>