如何限制Flex子项宽度，不受内容长度影响？

我懂你遇到的坑了——无空格的长串文本直接把flex容器撑爆，你试的overflow、text-overflow这些属性没起作用，核心问题出在flex子元素的默认最小宽度行为上！

问题根源 #

flex容器的直接子元素（也就是你的.b类元素）默认有min-width: auto的规则，这意味着它会优先保证自身内容的完整显示，不会主动收缩到父容器的宽度范围内。哪怕你给里面的span加了截断属性，.b还是会被长文本撑大，进而把整个父容器.a也撑得超出body的200px宽度。

解决方案 #

只需要两步就能搞定：

• 给.b设置min-width: 0，打破它的最小宽度限制，让它能跟着flex容器收缩；
• 给.b添加单行文本截断的必要属性，强制文本在一行内截断并显示省略号。

完整代码示例：

body { width: 200px }
.a { border: solid 1px black; display: flex; }
.b { 
  flex: 1; 
  min-width: 0; /* 关键：允许flex子元素收缩到小于内容宽度 */
  white-space: nowrap; /* 强制文本单行显示 */
  overflow: hidden; /* 隐藏超出容器的部分 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}

<div class=a>
  <div class=b>
    <span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
  </div>
  <button> click </button>
</div>

补充说明 #

如果你更想把截断属性加在内部的span上，那.b依然需要保留min-width: 0和overflow: hidden，因为只有.b先能收缩到父容器允许的宽度，里面的span才能在.b的范围内实现截断效果。

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