Flex vertically — Percentages and pixels. How to align?

There is a main unit, full screen. at a height of 100%
It should be placed 2 blocks horizontally so that the bottom was 200px and top all the remaining space.
5afbe6f3c0fbb045539607.jpeg
June 5th 19 at 21:45
3 answers
June 5th 19 at 21:47
Have flex:1, is calc
https://jsfiddle.net/j4wpxLgp/
June 5th 19 at 21:49
<div class="flex-row">
 <span class="t2 flex column">
 <em class="t1"></em>
 <em class="t2"></em>
</span>
</div>

.flex {
display:flex;
}
.row {
flex-direction:row;
}
.column {
flex-direction:column;
}
.t1 {
 flex:1 1 100%;
}
.t2 {
 flex:1 1 200px;
}
div {
width:100%;
height:100vh;
background:blue;
}
.flex.column {
background:red;
}
.column .t1 {
background:green;
}

Something like this
June 5th 19 at 21:51
Parent do:
div {
 display: flex;
 flex-direction: column;
 justify-content: space-between;
}


Children do:
.top {
 height: calc(100% - 200px);
}

.bottom {
 flex: 0 0 200px;
}
Brief and concise! - Akeem.Frits commented on June 5th 19 at 21:54

Find more questions by tags CSSFlexbox