FlexBox，高度100％

Question

我需要一个100％高度的弹性箱，只有50px的儿童页脚。 可能没有钙（100％ - 50px）？

我的尝试：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我没有100％的身高。

感谢您的帮助。

Answer 1

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

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

Answer 2

只需在动态元素上使用flex: 1。

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;
    flex: 1;
}
.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>