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>