纯CSS实现flex布局仅收缩内容超均分宽度的子元素是否可行？

该需求可以仅通过CSS实现，核心是结合min-width、max-width和CSS变量控制子元素的宽度范围，无需引入JavaScript即可适配动态内容。

实现逻辑 #

• 通过CSS变量存储子元素总数，动态计算均分宽度，子元素数量变化时只需修改容器上的变量值即可，渲染阶段内联赋值无需JS参与
• 给子元素设置min-width: fit-content，保证内容宽度小于均分宽度的子元素不会被收缩，完整展示自身内容
• 给子元素设置max-width为容器扣除间距后的均分宽度，内容超过该宽度的子元素会被限制宽度，溢出内容自动展示省略号

完整代码示例 #

* {
  box-sizing: border-box;
}
.container {
  --item-count: 3; /* 子元素数量，动态场景可通过内联样式赋值 */
  display: flex;
  width: 200px;
  gap: 5px; /* 替代子元素的右侧margin，方便计算宽度 */
  padding: 5px;
  background-color: #cde;
}
.item {
  flex: 0 1 auto;
  min-width: fit-content; /* 短内容不收缩 */
  max-width: calc((100% - (var(--item-count) - 1) * 5px) / var(--item-count)); /* 最大不超过均分宽度 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
}

/* 原有美化样式 */
.item:nth-child(1) {
  background-color: #dec;
}
.item:nth-child(2) {
  background-color: #ced;
}
.item:nth-child(3) {
  background-color: #dce;
}

<div class="container">
  <p class="item">sm</p>
  <p class="item">paragraph with large content</p>
  <p class="item">another large content</p>
</div>

运行上述代码即可实现预期效果：短内容的"sm"元素完整展示，两个长内容元素被限制在均分宽度内，溢出内容展示省略号。如果子元素总内容宽度小于容器宽度，所有元素都会完整展示不会收缩。

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