CSS Flexbox动态宽度容器内文本省略号不挤压元素实现方案

问题表现 #

使用CSS Flex布局时，给内部文本加了省略号（text-overflow: ellipsis）样式，长文本依然会把同级Flex子项挤出容器边界，效果如下图：

如果移除.content-2-wrapper的display: flex属性，省略号可以正常生效，但无法保留该容器的Flex自适应能力。

问题根源 #

Flex子项的min-width属性默认值为auto，意味着元素最小宽度不能小于内部内容的宽度，即使设置了flex:1分配剩余宽度，长文本也会撑大容器，把其他元素挤出去，内部的overflow: hidden也无法触发截断逻辑。
普通块级元素没有这个特性，宽度默认会受父容器约束，所以去掉display:flex后省略号能正常工作。

修复方案 #

给所有需要自适应宽度、内部要做文本截断的Flex子项添加min-width: 0，覆盖默认的auto值，允许元素宽度收缩到内容宽度以下。

• 针对提供的复现代码，只需要修改.content-2-wrapper的样式即可解决核心问题
• 如果后续.content-3、.content-4里也可能放置长文本，可以统一给外层Flex容器的直接子项设置该属性，避免同类问题

核心修改代码如下：

.content-2-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0; /* 新增这一行即可解决当前问题 */
}

/* 可选：统一给flex直接子项加约束，一劳永逸 */
.d-flex > * {
  min-width: 0;
}

修改后.content-2-wrapper依然可以随父容器宽度动态自适应，内部和同级元素的长文本都会正常触发省略号效果，不会再挤坏布局。

完整修复后代码 #

CSS部分 #

.container {
  max-width: 300px;
  width: 100%;
  padding: 16px;
  background-color: magenta;
  
}

.d-flex {
  display: flex;
  padding: 16px;
  flex-wrap: nowrap;
}

.content-1 {
  background-color: red;
  padding: 16px;
}

.content-2-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.content-2a {
  background-color: blue;
  padding: 16px;
}

.content-2b {
  background-color: gray;
  padding: 16px;
}

.content-3 {
  background-color: yellow;
  padding: 16px;
}

.content-4 {
  background-color: green;
  padding: 16px;
}

.ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

HTML部分 #

<div class="container">
  <div class="d-flex">
    <div class="content-1">
      1
    </div>
    <div class="content-2-wrapper">
      <div class="content-2a ellipsis">
        Very long content that breake my flex layout
      </div>
      <div class="content-2b ellipsis">
        second-content
      </div>
    </div>
    <div class="content-3 ellipsis">
      another content
    </div>
    <div class="content-4 ellipsis">
      last content
    </div>
  </div>
</div>

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