Flexbox，就如何讓DIV佔用

Question

頁

我使用Flexbox，就休息的高度，是我的頁面設置方式如下：

Parent (flex-direction: row) 

    -Child 1: (flex-direction: column) 

    -Child 2: (flex-direction: column) 

兒童2包含了我要佔用一個div頁面其餘部分的全部高度，並做出響應。我的問題是：我該如何做到這一點？

https://plnkr.co/edit/9Awc5IOp9jYUTRBhUj9L

那是我與工作模式的一個相當接近的表示。

屏幕截圖（我需要黃去頁面底部） https://gyazo.com/91ba070b8bd9b5396b892c967df33336

父不父頁。根組件上面還有1-2層以上的這個父級。

父組件少：

.container { 

    .search-and-list { 
     display: flex; 
     flex-direction: row; 

     .search { 
      width: 25%; 
      padding: 10px 16px; 
     } 

     .list { 
      flex: 1 1 auto; 
      padding: 10px 20px 0 0; 
     } 
    } 
} 

父HTML：

<div class="container"> 
    <header (toggleNewBucketWindow)="bucketChangeState($event)"></header> 
    <div class="search-and-list"> 
    <search class="search"></search> 
    <question-list class="list"></question-list> 
    </div> 
</div> 

兒童少：

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


    .label { 
     color: #ccc; 
     font-size: 12px; 
    } 

    .list { 
     border: 1px solid #ccc; 
     margin-right: 16px; 
     background: yellow; 
     width: 100%; 
     height: 100%; 
    } 
} 

子html：

<div class="container"> 
    <p class="label">{{title}}</p> 
    <div class="list"> 

    </div> 
</div> 

編輯：html和body標籤已經在我的項目中設置爲100％的高度。

EDIT2：更新的jsfiddle到plunker項目

EDIT3：增加了屏幕頂蓋

EDIT4：添加CSS/HTML

Answer 1

您應該使用VH參數（Viewport height）

編輯：刪除默認頁邊距/填充以避免滾動條。

CodePen：https://codepen.io/anon/pen/wrBWXm

<style> 

* { 
    margin: 0; 
    padding: 0; 
} 
.parent{ 
display:flex; 
height:100vh; 
background-color:azure; 
} 

.child{ 
display:flex; 
} 

</style> 
<div class="parent"> 
    <div class="child">Example</div> 
</div>