css - 高度为 100% 的 FlexBox

Question

我需要一个 100% 高度的 flexbox，只有一个 50px 的子页脚。没有 calc(100% - 50px) 是可能的吗？

这里是我的尝试:

body, html{
  height:100%;
}
.container {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color:red;
}

.flex-1 {
  background-color: yellow;
}

.flex-A {
    background-color: blue;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.flex-1-child {
    background-color: purple;
    overflow-y: auto;
    height: calc(100% - 50px);
}
.flex-2-child {
    background-color: green;
    height: 50px;
}

.text{
  height: 500px;
}

<div class="container">
    <div class="flex-1">test</div>
    <div class="flex-A">
        <div class="flex-1-child">
            <div class="text">test2</div>
         </div>
        <div class="flex-2-child">
            <div>test</div>
        </div>
    </div>
</div>

我没有 100% 的高度。

感谢您的帮助。

Answer 1

将 height: calc(100% - 50px); 更改为 flex: 1; 它将最大程度地扩展其高度。

我猜这就是你想要的？ https://jsfiddle.net/shuding/3ss44wuk/1