如何防止flex:1的子元素内容撑大父容器宽度

当flex容器里的中间元素包含无换行的长内容时，默认会撑大自身宽度，挤压两侧设置了固定宽度的元素。要让两侧元素始终保持固定宽度，中间元素自动换行并占据剩余空间，可按以下方式修改样式：

关键修改点 #

• 给固定宽度的.child-small添加flex-shrink: 0，禁止其被压缩
• 给中间的.child-big添加强制换行的样式，限制其宽度不超出剩余空间

修改后的完整代码 #

<div class="container">
  <div class="child-small"></div>
  <div class="child-big">
TTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT
  </div>
  <div class="child-small"></div>
</div>

<style>
  .container {
    display: flex;
    border: 1px solid red;
    border-radius: 10px;
  }

  .child-small {
    height: 100%;
    width: 150px;
    outline: 1px solid green;
    flex-shrink: 0; /* 确保固定宽度不被压缩 */
  }

  .child-big {
    flex: 1;
    outline: 1px solid blue;
    word-break: break-all; /* 强制长文本换行 */
  }
</style>

样式说明 #

• flex-shrink: 0：flex元素默认flex-shrink:1，空间不足时会被等比例压缩。设置为0后，.child-small的宽度会始终保持150px，不会被挤压。
• word-break: break-all：针对无空格的连续文本，允许在任意字符处换行，避免文本撑大容器，确保.child-big只占据flex容器的剩余宽度。

内容的提问来源于stack exchange，提问作者Hadi El Yakhni