如何判断flexbox布局行占用浏览器窗口中剩余的垂直空间？
我有一个三排flexbox布局.前两行是固定高度的，但第三行是动态的，我希望它能扩展到浏览器的整个高度.
我在第3行有另一个FlexBox，它创建一组列.要正确调整这些列中的元素，我需要它们了解浏览器的完整高度--比如背景 colored颜色 和底部的项目对齐方式.主要布局最终将类似于以下内容:
.vwrapper {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
//height: 1000px;
}
.vwrapper #row1 {
background-color: red;
}
.vwrapper #row2 {
background-color: blue;
}
.vwrapper #row3 {
background-color: green;
flex 1 1 auto;
display: flex;
}
.vwrapper #row3 #col1 {
background-color: yellow;
flex 0 0 240px;
}
.vwrapper #row3 #col2 {
background-color: orange;
flex 1 1;
}
.vwrapper #row3 #col3 {
background-color: purple;
flex 0 0 240px;
}<body>
<div class="vwrapper">
<div id="row1">
this is the header
</div>
<div id="row2">
this is the second line
</div>
<div id="row3">
<div id="col1">
col1
</div>
<div id="col2">
col2
</div>
<div id="col3">
col3
</div>
</div>
</div>
</body>我try 添加height属性，当我将其设置为硬数字时，该属性确实起作用，但当我将其设置为100%时，则不起作用.我知道height: 100%不起作用，因为内容没有填满浏览器窗口，但是我可以使用FlexBox布局复制这个 idea 吗？