如何实现列Div C占据父容器body的剩余水平空间？

原代码使用inline-block布局存在两个核心问题：元素间会产生默认的空白间隙，且无法自动让列C填充容器的剩余水平空间。改用CSS Flexbox可以完美解决这个需求，它原生支持混合宽度单位的布局，并能自动分配剩余空间。

修改后的完整代码 #

CSS 部分

html,
body {
  height: 100%;
  margin: 0px;
  padding: 0px;
  display: flex; /* 关键：将body设为Flex容器 */
}

.col {
  /* 移除inline-block，Flex项默认会横向排列 */
  position: relative;
  height: 100%;
  padding: 0 10px;
}

.a {
  background-color: #2a85ff;
  width: 20%;
}

.b {
  background-color: #83bf6e;
  width: 100px;
}

.c {
  background-color: #ff6a55;
  flex: 1; /* 关键：让C占据所有剩余空间 */
}

.c span {
  font-weight: bolder;
}

.d {
  background-color: #8e59ff;
  width: 200px;
}

.e {
  background-color: #b5e4ca;
  width: 20%;
}

HTML 部分

<div class="col a">
  <h1>A</h1>
  w:%percent
  <br/> h:100%
</div>

<div class="col b">
  <h1>B</h1>
  w:pixel
  <br/> h:100%
</div>

<div class="col c">
  <h1>C</h1>
  <span>w:remaining</span>
  <br/> h:100%
</div>

<div class="col d">
  <h1>D</h1>
  w:pixel
  <br/> h:100%
</div>

<div class="col e">
  <h1>E</h1>
  w:%percent
  <br/> h:100%
</div>

关键改动说明 #

1. 将body设置为Flex容器：display: flex;让所有子列自动横向排列，消除inline-block带来的空白间隙。
2. 给列C添加flex: 1;：这个属性是flex-grow: 1; flex-shrink: 1; flex-basis: 0%;的简写，意味着列C会尽可能占据容器的剩余水平空间，同时允许在容器过小时自动收缩。
3. 保留原有列的宽度设置：列A/E的百分比宽度、列B/D的固定像素宽度会被Flex容器优先计算，剩余空间全部分配给列C。

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