FlexBox with 100% height

Question

I need to have a 100% height flexbox with just a children footer with 50px. Is possible without have the calc(100% - 50px) ?

here my try:

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>

I don't have the 100% height.

Thank you for your help.

Answer 1

Simply use flex: 1 on the dynamic element.

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>

Answer 2

Change height: calc(100% - 50px); to flex: 1; and it will expand its height maximally.

I guess this is what you want? https://jsfiddle.net/shuding/3ss44wuk/1