如何让Flex子项始终填充容器剩余空间且内容不溢出？

问题描述 #

作为HTML/CSS新手，尝试让Flex子项填充容器剩余空间，但当子项内容过长时会溢出容器，break-word未生效。

原代码 #

CSS：

.a {
  width: 50%;
  height: 200px;
  background-color: black;
  display: flex;
}
.b {
  height: 100px;
  background-color: yellow;
  display: flex;
}
.c {
  background-color: gray;
  margin-left: 20px;
  color: blue;
  height: 20px; 
  display: flex;
  flex-grow: 1;
  word-wrap: break-word;
}

HTML：

<div class="a">
  <div class="b">vcvxzc</div>
  <div class="c">
    <span>cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</span>
  </div>  
</div>

解决方案 #

修改.c的CSS属性，添加flex-basis: 0和overflow: hidden，同时使用标准的overflow-wrap替代旧的word-wrap：

.a {
  width: 50%;
  height: 200px;
  background-color: black;
  display: flex;
}
.b {
  height: 100px;
  background-color: yellow;
}
.c {
  background-color: gray;
  margin-left: 20px;
  color: blue;
  height: 20px; 
  display: flex;
  flex-grow: 1;
  /* 关键：让flex-grow从0宽度开始计算，确保子项填充剩余空间 */
  flex-basis: 0;
  /* 标准换行属性，替代旧的word-wrap */
  overflow-wrap: break-word;
  /* 防止内容溢出容器 */
  overflow: hidden;
  /* 若需要强制断词（无空格也换行），可启用下面的属性 */
  /* word-break: break-all; */
}

原理说明 #

• flex-basis: 0：Flex子项默认flex-basis为auto，会基于内容计算初始宽度，导致flex-grow无法正确占据剩余空间。设置为0后，子项宽度从0开始扩展，完全填充容器剩余区域。
• overflow-wrap: break-word：用于在长单词或连续字符内部换行，需要容器有明确的宽度约束（flex-basis: 0提供了这个约束）。
• overflow: hidden：确保容器超出部分被隐藏，配合换行属性生效，彻底避免文本溢出。

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