前言

需求描述：两个元素竖向布局，第一个元素高度由自己的子级撑开（高度不确定），第二个元素的高度则自动占满剩余的空间(高度自适应)。

关于 flex布局 想必大家都已熟知，在此不做过多赘述。此次主要用到flex布局属性其中的两个：

fex-direction flex-shrink tips：如果元素不是弹性项目，则 flex 属性无效。

flex-direction

flex-direction 属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向(正方向或反方向)

属性值	描述
row	默认值。作为一行，水平地显示弹性项目。
row-reverse	等同行，但方向相反。
column	作为列，垂直地显示弹性项目。
column-reverse	等同列，但方向相反。
initial	将此属性设置为其默认值。
inherit	从其父元素继承此属性。

css语法:
flex-direction: row|row-reverse|column|column-reverse|initial|inherit;

flex-shrink

flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

属性值	描述
number	数字，规定项目相对于其余弹性项目的收缩量。默认值为 1。
initial	将此属性设置为其默认值。
inherit	从其父元素继承此属性。

css语法:
flex-shrink: number|initial|inherit;

HTML

  <div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
  </div>

CSS

.container{
  background: #cccccc;
  height: 100vh;
  display: flex; 
  flex-direction: column
}
.box1{
  width: 100%;
  background: pink;
  height: 20vh;
  max-height: 200px;
  flex-shrink: 0
}
.box2{
  width: 100%;
  background: skyblue;
  flex: 1; 
  height: 0
}

代码片段