如何实现Flexbox自动调整尺寸，缺失列时自动拉伸填充宽度？

.a、.b设置了固定width: 70%，该值不会随侧边栏.c的渲染状态自动调整，侧边栏缺失时，原本预留给侧边栏的30%宽度没有元素填充，就会出现空白。

直接替换原有CSS即可，HTML结构不需要改动：

section {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 100px;
}

.c {
  background: red;
  height: 100%;
  /* 侧边栏存在时固定占30%宽度，不伸缩 */
  flex: 0 0 30%;
}

.a, .b {
  height: 45px;
  background: green;
  /* 自动填充容器剩余横向空间 */
  flex: 1 1 0;
}

.a {
  background: lightblue;
}

• flex: 0 0 30%是flex-grow: 0; flex-shrink: 0; flex-basis: 30%的简写，代表侧边栏.c渲染时固定占据30%宽度，不会被拉伸也不会被压缩
• flex: 1 1 0是flex-grow: 1; flex-shrink: 1; flex-basis: 0的简写，代表.a、.b两个元素会自动瓜分容器内所有剩余的横向空间：
  • 当侧边栏存在时，剩余横向空间为总宽度的70%，两个元素刚好占满这部分区域，和你原本的排布效果完全一致
  • 当侧边栏不存在时，剩余横向空间为总宽度的100%，两个元素会自动拉伸撑满整个容器，不会出现空白区域

内容的提问来源于stack exchange，提问作者Kermit