Flex Vertical - Percentages and Pixels. How to align?

Question

css

There is a main block, in full screen. in height 100%
In it you need to arrange horizontally 2 blocks so that the bottom one is 200px, and the top one is all the rest of the space.

Answer 1

There is flex:1, there is calc
https://jsfiddle.net/j4wpxLgp/

Answer 2

Parent do:

div {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

We do for children:

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

.bottom {
  flex: 0 0 200px;
}

Answer 3

<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