flex-direction column 子元素 height 100% 无效的解决办法

演示代码：

<main class="container">
  <div></div>
  <div style="flex:1">
    <div class="xiao-a"></div>
  </div>  
  <div></div>  
</main>

<style type="text/css">  
body{
  padding: 0;
  margin: 0;
}

.container{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.container > div {
  border:1px solid red;
  height: 50px;
}

.xiao-a{
  height: 100%;
  background: cornflowerblue;
}
</style>

此时效果应该是这样的

xiao-a 的 height: 100% 并没有奏效。那如何生效？

只需要把 container 的 min-height 改为 height。

那么想要container使用min-height 又想要 xiao-a使用height: 100%应该怎么办？

答：套一层 flex row：

<main class="container">
  <div></div>

  <div style="flex:1; display: flex;"> <!-- 添加 display: flex; -->
    <div style="width: 100%;">         <!-- 添加 -->
      <div class="xiao-a"></div>
    </div>                             <!-- 添加 -->
  </div>  
  
  <div></div>  
</main>