How exactly is the height of two divs with flex shrink and flex-basis values calculated?

Question

I have html and css as below.

.container {
  height: 200px;
  background-color: grey;
  display: flex;
  flex-direction: column;
}

.top {
  flex: 0 0 10%;
  background-color: red;
}

.middle {
  flex: 0 2 20%;
  background-color: cyan;
}

.bottom {
  flex: 0 1 80%;
  background-color: orange;
}

<div class="container">
  <div class="top">top</div>
  <div class="middle">middle</div>
  <div class="bottom">bottom</div>
</div>

The height of the container div is 200 px. flex-grow and flex-shrink values of top div are 0 and flex-basis value is 20%. So the height of top div is 20px (200 * 0.10).Everything is ok until here. How exactly does the browser then calculate the computed height of middle and bottom divs that have flex-shrink and flex-basis values?(How the remaining 180px is divided between these two divs.)