Flexbox：如何组合列上的百分比、像素和剩余高度？

Answer 1

使用

flex-grow

参数（

flex

简写属性中的第一个）：

* { margin: 0; box-sizing: border-box; }

.grid {
  height: 100dvh;
  background: #aaa;
  display: flex;
  flex-direction: column;
}

.block {
  outline: solid 1px black;
}

.a {
  flex: 0 0 50px;
}

.b {
  flex: 0 0 15%;
}

.c {
  flex: 1 0 0;
}

<div class="grid">
  <div class="block a">block height 50px</div>
  <div class="block b">block height 15%</div>
  <div class="block c">block height *</div>
  <div class="block a">block height 50px</div>
</div>

代码笔