html - 使 Flex-container（在另一个 Flex-container 中）响应

Question

为什么在降低外部容器的高度时top-container，其及其元素（# first, # second, # third）的高度不会降低？

而且，如果直接给top-container元素设置高度，那么嵌套的元素还是会被压缩...

如何使其后代嵌套在另一个 flex 容器中的 flex 容器缩小？:)

默认情况下，项目的高度.top-container必须为 120px，但如果需要，必须缩小到 40px。

.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>

标签： htmlcssflexbox