Flex子项换行时flex-grow未占可用空间，如何消除子项间隙？

问题描述 #

需求是让第二个子项（设置white-space:nowrap保持始终单行）占用所有可用空间，容器宽度足够时（示例1）功能正常，但容器宽度不足导致第一个子项换行时（示例2），两个子项之间会出现较大间隙，需要消除该仅在换行时出现的间隙。

原因分析 #

默认状态下，第一个子项的flex属性为0 1 auto，它的基础宽度是内容的单行宽度。当容器变窄触发子项换行后，Flex布局仍会以这个单行宽度为基准计算空间分配，再加上容器设置的gap:1rem，就会出现视觉上的多余间隙。

解决方案 #

给第一个子项设置flex:1（等价于flex:1 1 auto），让它能根据容器宽度灵活收缩和扩展，同时可配合word-break:break-all确保长文本正常换行（可选，根据实际内容调整）。修改后的代码如下：

CSS代码 #

.container {
  margin-bottom:1rem;
  background-color:#eee;
  display:flex;
  gap:1rem;
  align-items:center;
}

.container>span:nth-child(1) {
  flex:1; /* 关键配置：让第一个子项占据可用空间并灵活收缩 */
  word-break: break-all; /* 确保长文本正常换行，按需启用 */
}

.container>span:nth-child(2) {
  white-space:nowrap;
  flex:1 1 auto;
}

HTML代码 #

Example 1:
<div class="container"  style="width:500px;">
  <span>text allowed to be multilineeeeeeee</span>
  <span>single line</span>
</div>

Example 2:
<div class="container" style="width:250px;">
  <span>text allowed to be multilineeeeeeee</span>
  <span>single line</span>
</div>

效果说明 #

• 容器宽度足够时：第一个子项和第二个子项按比例分配空间，第二个子项保持单行状态。
• 容器宽度不足时：第一个子项自动换行，且会收缩到最小必要宽度，两个子项间仅保留设置的gap:1rem，多余空白被消除。

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