相关疑难解决方法(0)

如何让我的flexbox布局占用100%的垂直空间？

如何告诉flexbox布局行消耗浏览器窗口中剩余的垂直空间？

我有一个3排flexbox布局.前两行是固定高度,但第三行是动态的,我希望它增长到浏览器的整个高度.

在此输入图像描述

我在第3行中有另一个flexbox,它创建了一组列.要正确调整这些列中的元素,我需要它们来理解浏览器的整个高度 - 例如背景颜色和底部的项目对齐.主要布局最终将类似于:

在此输入图像描述

.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;
}

Run Code Online (Sandbox Code Playgroud)