Verschachtelte Flexbox mit horizontalem Überlauf

Question

Ich verwende ein verschachteltes Flexbox-Layout.

Ich möchte, dass ein linkes Nav immer 1/3 der Seite und die rechte Seite immer 2/3 beträgt.

Das linke Nav sollte immer im Blick bleiben.

Die rechte Seite (ein Bildkarussell in meinem Fall) sollte immer 2/3 dauern und eine horizontale Bildlaufleiste auf den Boxen haben.

Im folgenden Code wird der Überlauf einfach gedehnt und ignoriert.

<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

Statt flex-grow, die einfach freien Raum in dem Behälter verteilt, verwenden flex-basis, das Ihre Einzelteile 1/3 und 2/3 explizit Größen.

Dann, weil die default minimum width of flex items ist min-width: auto, das heißt, sie nicht als die Größe ihres Inhalts kleiner sein kann, min-width: 0 verwendet, dass standardmäßig auf dem Karussell außer Kraft zu setzen.

<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

Zuerst habe ich Ihre Stile Klassen verschoben. Verwenden Sie kein Inline-CSS.

flex CSS-Eigenschaft ist eine Abkürzung für Einstellung flex: [flex-grow] [flex-shrink] [flex-basis].

können Sie einstellen, festen Prozentsatz auf Ihre flex-basis Werte und Nullen zu flex-grow und flex-shrink flex Produkte zu vermeiden, wachsen und schrumpfen.

Auch Sie zeigen bewegen scroll CSS auf Ihre rechten nav Block.

*, 
 
*: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>