オーバーフロー-xを全幅フレックスボックス列で使用できない

Question

フレックスボックスで2列レイアウトを作成しようとしています。 1つは横に固定され、もう1つ（メイン列）は残りのスペースを埋める。

overflow-x: scrollの親を持つ画面よりもいくつかのコンテンツを画面に配置するまで機能していました。現在、この幅広いコンテンツはスクロールバーの親によって制限されていません。ここで

はサンプルです：

.container { 
 
    display: flex; 
 
} 
 
.container .col-main { 
 
    background: gold; 
 
    flex: 1 1 100%; 
 
} 
 
.container .col-side { 
 
    background: cornflowerblue; 
 
    flex: 0 0 15em; 
 
} 
 

 
.slider-container { 
 
    overflow-x: scroll; 
 
} 
 
.slider-container .slider { 
 
    background: repeating-linear-gradient(45deg, darkseagreen, darkseagreen 10px, dimgray 10px, dimgray 20px); 
 
    width: 150em; 
 
    height: 10em; 
 
}

<div class="container"> 
 
    <div class="col-main"> 
 

 
    <div class=slider-container> 
 
     <div class="slider"> 
 
     Foo 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
    <div class="col-side"> 
 
    Side 
 
    </div> 
 
</div>

それは次のようにレンダリングする必要があります。

Answer 1

はフレックス項目にmin-width: 0;を追加してみてください。

.container .col-main { 
    ... 
    min-width: 0; 
} 

jsFiddle

4.5. Implied Minimum Size of Flex Items

フレックス項目のためのより合理的なデフォルトの最小サイズを提供するために、この仕様はmin-widthとmin-heightプロパティの初期値として、新しいauto値を紹介CSS 2.1で定義されています。 [CSS21]

Answer 2

width: 0をコンテナに追加できます。

.container { 
 
    display: flex; 
 
} 
 

 
.container .col-main { 
 
    background: gold; 
 
    flex: 1 1 100%; 
 
    width: 0; 
 
} 
 

 
.container .col-side { 
 
    background: cornflowerblue; 
 
    flex: 0 0 15em; 
 
} 
 

 
.slider-container { 
 
    overflow-x: scroll; 
 
} 
 

 
.slider-container .slider { 
 
    background: repeating-linear-gradient(45deg, darkseagreen, darkseagreen 10px, dimgray 10px, dimgray 20px); 
 
    width: 150em; 
 
    height: 10em; 
 
}

<div class="container"> 
 
    <div class="col-main"> 
 

 
    <div class=slider-container> 
 
     <div class="slider"> 
 
     Foo 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
    <div class="col-side"> 
 
    Side 
 
    </div> 
 
</div>