Make Flex-container (which inside another Flex-container) responsive

Question

Why, when decreasing the height of the external container, does the height of the top-container and its elements (# first, # second,# third) not decrease?

Moreover, if you set the height directly for the top-container element, then the nested elements are still compressed ...

How to make a flex container with its descendants nested in another flex container shrink? :)

Height of items of .top-container must be 120px by default, but must shrink to 40px if it needed.

.outer-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 450px;
}

.top-container {
  display: flex;
  flex-direction: column;
  
  background: rgba(200,0,0,.5);
}

.top-container div {
  border: 1px solid black;
  flex: 0 1 120px;
  min-height: 40px;
  display: flex;
  align-items: center;
}

.bottom-container {
  display: flex;
  flex-direction: column;
  flex: none;
  
  background: rgba(0,200,0,.5);
}

.bottom-container div {
  border: 1px solid black;
  display: flex;
  align-items: center;
}

<div class="outer-container">
   <div class="top-container">
    <div id="first">111</div>
    <div id="second">222</div>
    <div id="third">333</div>
  </div>
  <div class="bottom-container">
    <div id="four">4</div>
    <div id="five">5</div>
  </div>
</div>