水平オーバーフローのネストされたFlexbox

Question

ネストされたフレックスボックスレイアウトを使用しています。

私は、左のナビゲーションが常にページの1/3になり、右のサイドが常に2/3になるようにしたいと思います。

左のナビゲーションは常に表示のままにしてください。

私の場合、右側（画像カルーセル）は常に2/3を使い、ボックスには水平スクロールバーがあります。

以下のコードでは、オーバーフローを単に無視して無視しています。単に容器に空きスペースを配布

<div> 
 
    Top Header (should stay in view) 
 
</div> 
 
<div style="display: flex"> 
 
    <div style="flex: 1 0 auto"> 
 
    LeftNav 
 
    </div> 
 
    <div style="flex: 2 0 auto"> 
 
    <div style="display: flex; flex-direction: row; overflow-x: scroll"> 
 
     <div style="background-color: blue; min-width: 400px; height: 500px"> 
 
     </div> 
 
     <div style="background-color: red; min-width: 400px; height: 500px"> 
 
     </div> 
 
     <div style="background-color: green; min-width: 400px; height: 500px"> 
 
     </div> 
 
    </div> 
 
    </div>

Answer 1

代わりのflex-grow、明示的にあなたの項目1/3と2/3のサイズこれは、flex-basisを使用しています。

default minimum width of flex itemsがmin-width: autoであるため、コンテンツのサイズより小さくすることはできませんので、min-width: 0を使用してカルーセルのデフォルトを上書きしてください。

<div> 
 
    Top Header (should stay in view) 
 
</div> 
 
<div style="display: flex"> 
 
    <div style="flex: 0 0 33%">LeftNav</div> 
 
    <div style="flex: 0 0 67%; min-width: 0;"> 
 
    <div style="display: flex; flex-direction: row; overflow-x: scroll"> 
 
     <div style="background-color: blue; min-width: 400px; height: 500px"> 
 
     </div> 
 
     <div style="background-color: red; min-width: 400px; height: 500px"> 
 
     </div> 
 
     <div style="background-color: green; min-width: 400px; height: 500px"> 
 
     </div> 
 
    </div> 
 
    </div>

Answer 2

まず、私はクラスに自分のスタイルを移動しました。インラインCSSは使用しないでください。

flex CSSプロパティは、flex: [flex-grow] [flex-shrink] [flex-basis]の略称です。

flex-basisの値と0の固定割合をflex-growとflex-shrinkに設定すると、フレキシブルなアイテムの伸縮を避けることができます。

また、右側のナビゲーションブロックにscrollのCSSを表示します。

*, 
 
*:before, 
 
*:after { 
 
    box-sizing: border-box; 
 
} 
 

 
.main-container { 
 
    display: flex; 
 
} 
 

 
.left-nav { 
 
    flex: 0 0 calc(100%/3); /* One third width */ 
 
} 
 

 
.right-nav { 
 
    flex: 0 0 calc(200%/3); /* Two third width */ 
 
    overflow-x: scroll; 
 
} 
 

 
.right-nav-container { 
 
    display: flex; 
 
} 
 

 
.right-nav-item { 
 
    min-width: 400px; 
 
    height: 500px 
 
} 
 

 
.right-nav-item:nth-child(1) { 
 
    background-color: blue; 
 
} 
 

 
.right-nav-item:nth-child(2) { 
 
    background-color: red; 
 
} 
 

 
.right-nav-item:nth-child(3) { 
 
    background-color: green; 
 
}

<div> 
 
    Top Header (should stay in view) 
 
</div> 
 
<div class="main-container"> 
 
    <div class="left-nav"> 
 
    LeftNav 
 
    </div> 
 
    <div class="right-nav"> 
 
    <div class="right-nav-container"> 
 
     <div class="right-nav-item"> 
 
     </div> 
 
     <div class="right-nav-item"> 
 
     </div> 
 
     <div class="right-nav-item"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>