Flexbox volle Höhe und Breite mit Seitenwänden

Question

Ich begann mit dem Lesen Flexbox and vertical scroll in a full-height app using NEWER flexbox api. Und die folgenden Arbeiten ziemlich gut:

html,body{ 
 
    overflow: hidden; 
 
    width: 100%; height: 100%; 
 
    max-height: 100%; max-width: 100%; 
 
    margin: 0; padding: 0; 
 
} 
 

 
.site-container { 
 
    height: 100%; width: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.site-container .site-header, 
 
.site-container .site-footer{ 
 
    flex: 0 0 auto; 
 
    overflow: visible; 
 
} 
 

 
.site-container .site-body { 
 
    position: relative; 
 
    overflow: auto; 
 
    min-height: 0px; 
 
    flex: 0 1 auto; 
 
    }

<div class="site-container"> 
 
    <div class="site-header"> 
 
    <div style="height: 40px;background-color:YellowGreen">My Header Test </div> 
 
    </div> 
 
    <div class="site-body"> 
 
      blah1<br /> 
 
      blah2<br /> 
 
      blah3<br /> 
 
      blah4<br /> 
 
      blah5<br /> 
 
      blah6<br /> 
 
      blah7<br /> 
 
      blah8<br /> 
 
      blah9<br /> 
 
      blah10<br /> 
 
      blah11<br /> 
 
      blah12<br /> 
 
      blah13<br /> 
 
      blah14<br /> 
 
      blah15<br /> 
 
      blah16<br /> 
 
      blah17<br /> 
 
      blah18<br /> 
 
      blah19<br /> 
 
      blah20<br /> 
 
      blah21<br /> 
 
      blah22<br /> 
 
      blah23<br /> 
 
      blah24<br /> 
 
      blah25<br /> 
 
      blah26<br /> 
 
      blah27<br /> 
 
      blah28<br /> 
 
      blah29<br /> 
 
      blah30<br /> 
 
      blah31<br /> 
 
      blah32<br /> 
 
      blah33<br /> 
 
      blah34<br /> 
 
      blah35<br /> 
 
      blah36<br /> 
 
      blah37<br /> 
 
      blah38<br /> 
 
      blah39<br /> 
 
      blah40<br /> 
 
      blah41<br /> 
 
      blah42<br /> 
 
      blah43<br /> 
 
      blah44<br /> 
 
      blah45<br /> 
 
      blah46<br /> 
 
      blah47<br /> 
 
      blah48<br /> 
 
      blah49<br /> 
 
      blah50<br /> 
 
      blah51<br /> 
 
      blah52<br /> 
 
      blah53<br /> 
 
      blah54<br /> 
 
      blah55<br /> 
 
      blah56<br /> 
 
      blah57<br /> 
 
      blah58<br /> 
 
      blah59<br /> 
 
      blah60<br /> 
 
      blah61<br /> 
 
      blah62<br /> 
 
      blah63<br /> 
 
      blah64<br /> 
 
      blah65<br /> 
 
      blah66<br /> 
 
      blah67<br /> 
 
      blah68<br /> 
 
      blah69<br /> 
 
    </div> 
 
    <div class="site-footer"> 
 
    <div style="height: 40px;background-color:YellowGreen">My Footer Test </div> 
 
    </div> 
 
</div>

In dem obigen Code-Schnipsel, der Körper rollt ganz gut.

Jetzt versuche ich, den Körper in Reihe zu biegen und nicht scrollende Seitenleisten zu erstellen, aber behalte den Inhalt in der Mitte. Ich habe Folgendes, aber der Inhalt scrollt nicht. Was vermisse ich?

html,body{ 
 
    overflow: hidden; 
 
    width: 100%; height: 100%; 
 
    max-height: 100%; max-width: 100%; 
 
    margin: 0; padding: 0; 
 
} 
 

 
.site-container { 
 
    height: 100%; width: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.site-container .site-header, 
 
.site-container .site-footer{ 
 
    flex: 0 0 auto; 
 
    overflow: visible; 
 
} 
 

 
.site-container .site-body { 
 
    position: relative; 
 
    min-height: 0px; 
 
    flex: 0 1 auto; 
 
} 
 

 
.body-container{ 
 
    display: flex; 
 
    height: 100%; 
 
    width: 100%; 
 
    flex-direction: row; 
 
} 
 

 
.body-container .body-left, 
 
.body-container .body-right{ 
 
    flex: 0 0 auto; 
 
    overflow: visible; 
 
} 
 

 
.body-container .site-content{ 
 
    position: relative; 
 
    overflow: auto; 
 
    min-width: 0px; 
 
    flex: 1 0 auto; 
 
}

<div class="site-container"> 
 
    <div class="site-header"> 
 
    <div style="height: 40px;background-color:YellowGreen">My Header Test </div> 
 
    </div> 
 
    <div class="site-body"> 
 
    <div class="body-container"> 
 
     <div class="site-sidebar-left"> 
 
     <div style="background-color:lightgray;"> 
 
      left1<br /> 
 
      left2<br /> 
 
      left3<br /> 
 
      left4<br /> 
 
      left5<br /> 
 
      left6<br /> 
 
      left7<br /> 
 
      left8<br /> 
 
      left9<br /> 
 
      left10<br /> 
 
     </div> 
 
     </div> 
 
     <div class="site-content"> 
 
     blah1<br /> 
 
     blah2<br /> 
 
     blah3<br /> 
 
     blah4<br /> 
 
     blah5<br /> 
 
     blah6<br /> 
 
     blah7<br /> 
 
     blah8<br /> 
 
     blah9<br /> 
 
     blah10<br /> 
 
     blah11<br /> 
 
     blah12<br /> 
 
     blah13<br /> 
 
     blah14<br /> 
 
     blah15<br /> 
 
     blah16<br /> 
 
     blah17<br /> 
 
     blah18<br /> 
 
     blah19<br /> 
 
     blah20<br /> 
 
     blah21<br /> 
 
     blah22<br /> 
 
     blah23<br /> 
 
     blah24<br /> 
 
     blah25<br /> 
 
     blah26<br /> 
 
     blah27<br /> 
 
     blah28<br /> 
 
     blah29<br /> 
 
     blah30<br /> 
 
     blah31<br /> 
 
     blah32<br /> 
 
     blah33<br /> 
 
     blah34<br /> 
 
     blah35<br /> 
 
     blah36<br /> 
 
     blah37<br /> 
 
     blah38<br /> 
 
     blah39<br /> 
 
     blah40<br /> 
 
     blah41<br /> 
 
     blah42<br /> 
 
     blah43<br /> 
 
     blah44<br /> 
 
     blah45<br /> 
 
     blah46<br /> 
 
     blah47<br /> 
 
     blah48<br /> 
 
     blah49<br /> 
 
     blah50<br /> 
 
     blah51<br /> 
 
     blah52<br /> 
 
     blah53<br /> 
 
     blah54<br /> 
 
     blah55<br /> 
 
     blah56<br /> 
 
     blah57<br /> 
 
     blah58<br /> 
 
     blah59<br /> 
 
     blah60<br /> 
 
     blah61<br /> 
 
     blah62<br /> 
 
     blah63<br /> 
 
     blah64<br /> 
 
     blah65<br /> 
 
     blah66<br /> 
 
     blah67<br /> 
 
     blah68<br /> 
 
     blah69<br /> 
 
     </div> 
 
     <div class="site-sidebar-right"> 
 
     <div style="background-color:lightgray;"> 
 
      right1<br /> 
 
      right2<br /> 
 
      right3<br /> 
 
      right4<br /> 
 
      right5<br /> 
 
      right6<br /> 
 
      right7<br /> 
 
      right8<br /> 
 
      right9<br /> 
 
      right10<br /> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="site-footer"> 
 
    <div style="height: 40px;background-color:YellowGreen">My Footer Test </div> 
 
    </div> 
 
</div>

Schließlich würde es wie folgt aussehen:

Answer 1

Im Gegensatz zu den site-header, die einen flexiblen Element des site-container ist, die site-footer innerhalb des site-body verschachtelt wurde. Entweder war das beabsichtigt oder du hast eine schließende div verpasst. Für die Zwecke dieser Antwort habe ich letzteres angenommen.

Jetzt sind die site-header, site-body und site-footer Geschwister.

Dann habe ich overflow: auto und flex: 1 zu .site-content hinzugefügt. Der erste, um Scrollbalken zu aktivieren, und der zweite, um freien Speicherplatz in der Zeile zu verbrauchen.

.site-container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100vh; 
 
} 
 

 
.site-body { 
 
    min-height: 0px; 
 
    height: 100%; 
 
} 
 

 
.body-container { 
 
    display: flex; 
 
    height: 100%; 
 
} 
 

 
.site-content { 
 
    flex: 1; 
 
    overflow: auto; 
 
} 
 

 
body { 
 
    margin: 0; 
 
}

<div class="site-container"> 
 
    <div class="site-header"> 
 
    <div style="height: 40px;background-color:YellowGreen">My Header Test </div> 
 
    </div> 
 
    <div class="site-body"> 
 
    <div class="body-container"> 
 
     <div class="site-sidebar-left"> 
 
     <div style="background-color:lightgray;"> 
 
      left1 
 
      <br /> left2 
 
      <br /> left3 
 
      <br /> left4 
 
      <br /> left5 
 
      <br /> left6 
 
      <br /> left7 
 
      <br /> left8 
 
      <br /> left9 
 
      <br /> left10 
 
      <br /> 
 
     </div> 
 
     </div> 
 
     <div class="site-content"> 
 
     blah1 
 
     <br /> blah2 
 
     <br /> blah3 
 
     <br /> blah4 
 
     <br /> blah5 
 
     <br /> blah6 
 
     <br /> blah7 
 
     <br /> blah8 
 
     <br /> blah9 
 
     <br /> blah10 
 
     <br /> blah11 
 
     <br /> blah12 
 
     <br /> blah13 
 
     <br /> blah14 
 
     <br /> blah15 
 
     <br /> blah16 
 
     <br /> blah17 
 
     <br /> blah18 
 
     <br /> blah19 
 
     <br /> blah20 
 
     <br /> blah21 
 
     <br /> blah22 
 
     <br /> blah23 
 
     <br /> blah24 
 
     <br /> blah25 
 
     <br /> blah26 
 
     <br /> blah27 
 
     <br /> blah28 
 
     <br /> blah29 
 
     <br /> blah30 
 
     <br /> blah31 
 
     <br /> blah32 
 
     <br /> blah33 
 
     <br /> blah34 
 
     <br /> blah35 
 
     <br /> blah36 
 
     <br /> blah37 
 
     <br /> blah38 
 
     <br /> blah39 
 
     <br /> blah40 
 
     <br /> blah41 
 
     <br /> blah42 
 
     <br /> blah43 
 
     <br /> blah44 
 
     <br /> blah45 
 
     <br /> blah46 
 
     <br /> blah47 
 
     <br /> blah48 
 
     <br /> blah49 
 
     <br /> blah50 
 
     <br /> blah51 
 
     <br /> blah52 
 
     <br /> blah53 
 
     <br /> blah54 
 
     <br /> blah55 
 
     <br /> blah56 
 
     <br /> blah57 
 
     <br /> blah58 
 
     <br /> blah59 
 
     <br /> blah60 
 
     <br /> blah61 
 
     <br /> blah62 
 
     <br /> blah63 
 
     <br /> blah64 
 
     <br /> blah65 
 
     <br /> blah66 
 
     <br /> blah67 
 
     <br /> blah68 
 
     <br /> blah69 
 
     <br /> 
 
     </div> 
 
     <div class="site-sidebar-right"> 
 
     <div style="background-color:lightgray;"> 
 
      right1 
 
      <br /> right2 
 
      <br /> right3 
 
      <br /> right4 
 
      <br /> right5 
 
      <br /> right6 
 
      <br /> right7 
 
      <br /> right8 
 
      <br /> right9 
 
      <br /> right10 
 
      <br /> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="site-footer"> 
 
    <div style="height: 40px;background-color:YellowGreen">My Footer Test </div> 
 
    </div> 
 
</div>

https://jsfiddle.net/9mqxytv4/2/