最小スクロールバーと子divでフレックスボックスを作成する方法

Question

page divに十分な垂直スペースがなく、垂直スクロールバーがある場合は、app-sidebar divは伸びていません垂直空間を塗りつぶし、ビューポートの高さによって制限されます。

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 

 
.viewport { 
 
    height: 100%; 
 
    width: 100%; 
 
    display: flex; 
 
} 
 

 
.app { 
 
    flex: 1; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.app-header { 
 
    height: 48px; 
 
    background: #AAAAAA; 
 
} 
 

 
.app-body { 
 
    flex: 1; 
 
    display: flex; 
 
} 
 

 
.app-sidebar { 
 
    width: 220px; 
 
    background: #999999; 
 
} 
 

 
.app-content { 
 
    flex: 1; 
 
    display: flex; 
 
} 
 

 
.feature { 
 
    flex: 1; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.feature-header { 
 
    height: 48px; 
 
    background: #888888; 
 
} 
 

 
.feature-body { 
 
    flex: 1; 
 
    display: flex; 
 
} 
 

 
.page { 
 
    flex: 1; 
 
    min-width: 600px; 
 
    max-width: 1200px; 
 
    min-height: 400px; 
 
    max-height: 800px; 
 
    background: #777777; 
 
}

<div class="viewport"> 
 
    <div class="app"> 
 
    <div class="app-header"> 
 
    </div> 
 
    <div class="app-body"> 
 
     <div class="app-sidebar"> 
 
     </div> 
 
     <div class="app-content"> 
 
     <div class="feature"> 
 
      <div class="feature-header"> 
 
      </div> 
 
      <div class="feature-body"> 
 
      <div class="page"> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

enter image description here

Answer 1

あなたは代わりにビューポートユニットを使用して簡略化され、ここで、.viewportにmin-heightを使用する必要があります。

注意、IE11はflex: 1（flex-basisを作る0/0PXも）好きなので、使用するかしない（私はサンプルの下で変化していなかった）flex-grow: 1またはflex: 1 1 auto。

body { 
 
    margin: 0; 
 
} 
 

 
.viewport { 
 
    min-height: 100vh;    /* changed */ 
 
    display: flex; 
 
} 
 

 
.app { 
 
    flex: 1; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.app-header { 
 
    height: 48px; 
 
    background: #AAAAAA; 
 
} 
 

 
.app-body { 
 
    flex: 1; 
 
    display: flex; 
 
} 
 

 
.app-sidebar { 
 
    width: 220px; 
 
    background: #999999; 
 
} 
 

 
.app-content { 
 
    flex: 1; 
 
    display: flex; 
 
} 
 

 
.feature { 
 
    flex: 1; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.feature-header { 
 
    height: 48px; 
 
    background: #888888; 
 
} 
 

 
.feature-body { 
 
    flex: 1; 
 
    display: flex; 
 
} 
 

 
.page { 
 
    flex: 1; 
 
    min-width: 600px; 
 
    max-width: 1200px; 
 
    min-height: 400px; 
 
    max-height: 800px; 
 
    background: #777777; 
 
}

<div class="viewport"> 
 
    <div class="app"> 
 
    <div class="app-header"> 
 
    </div> 
 
    <div class="app-body"> 
 
     <div class="app-sidebar"> 
 
     </div> 
 
     <div class="app-content"> 
 
     <div class="feature"> 
 
      <div class="feature-header"> 
 
      </div> 
 
      <div class="feature-body"> 
 
      <div class="page"> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>