Flex父容器无法收缩包裹子内容 子元素计算宽度为0仍不生效

你加min-width: 0不生效的核心原因，是踩了flex布局的循环依赖解析规则，和子项收缩权限无关：

• 你给.flexer设了display: inline-flex，这类行内级弹性容器的宽度默认是收缩贴合内容的，计算宽度时需要先拿到所有flex子项的基准尺寸
• 你给.extra设的flex-basis: 0%是百分比值，百分比flex-basis的解析依赖父容器的宽度，这就形成了循环：容器宽度要靠子项尺寸算，子项的flex-basis又要靠容器宽度算
• 按照弹性布局规范，遇到这种循环场景时，浏览器会直接降级处理，把百分比flex-basis按子项的固有内容宽度解析，也就是"extra"文本的宽度。这时候整个容器的宽度计算结果就是「test文本宽度 + extra文本宽度」，自然会保持撑开状态
• 这种场景下根本没有触发flex子项的收缩逻辑，你加的min-width: 0（作用是允许子项收缩到小于内容宽度）完全没有生效的场景，自然没用。

不需要JS、不需要绝对定位，只要调整flex属性打破循环依赖即可，原有DOM结构可以完全保留：

.flexer {
  display: inline-flex;
  border: 1px solid red;
}
/* 固定文本项设置为不收缩，保证内容始终完整显示 */
.flexer > div:first-child {
  flex: 0 0 auto;
}
.extra {
  /* 核心：flex-basis用绝对单位0px，不使用百分比，彻底打破循环依赖 */
  flex: 0 1 0px;
  min-width: 0;
  overflow: hidden;
  /* 过渡flex-grow属性即可实现平滑动画 */
  transition: flex-grow .3s cubic-bezier(.4,0,.2,1);
  white-space: nowrap; /* 防止文本换行，保证宽度计算准确 */
}
.flexer:hover .extra {
  flex-grow: 1;
}

实现逻辑说明 #

• 未hover状态下，.extra的flex基准宽度是固定0px，flex-grow为0，所以最终宽度为0，容器宽度刚好贴合第一个子项的"test"文本，红色边框正常收缩
• hover时.extra的flex-grow变为1，浏览器会自动计算弹性容器的适配宽度，撑开至刚好容纳"test"+"extra"两段文本的尺寸
• flex-grow是数值型属性，原生支持过渡动画，整个宽度变化过程平滑无跳变，完全符合预期效果。

直接替换原有CSS即可运行，不需要修改HTML结构。

内容的提问来源于stack exchange，提问作者a.h.g.