flex-basis:0未覆盖width及未实现等宽的技术咨询

问题背景 #

我了解到flex-basis应该覆盖width属性，但在以下示例中，两个容器都设置了flex-basis: 0，第二个容器的子元素额外添加width: 50px后，反而实现了元素等宽的效果。我有两个疑惑：

• 为何flex-basis: 0没有覆盖width（预期添加width后无效果）；
• 为何flex-basis: 0没有将假设主尺寸设为0，从而无需添加width就能实现等宽。

根据W3C规范：

确定每个项目的flex基准尺寸和假设主尺寸：

1. 若项目有确定的已用flex基准尺寸，则该值为flex基准尺寸。
2. 假设主尺寸是项目的flex基准尺寸根据已用最小/最大主尺寸限制后的结果（内容盒尺寸下限为0）。

按此理解，flex基准尺寸应该设为0，且因无min/max-width约束，假设主尺寸也应为0。

代码示例

CSS代码：

.container1, .container2 {
    width: 210px;
    height: 200px;
    padding: 10px;
    border: solid;
    display: inline-flex;
    box-sizing: border-box;

    div {
        margin: 1px;
        flex: 1 1 0;
    }

    & div:nth-child(1) {
        background: lightpink;
    }

    & div:nth-child(2) {
        background: lightblue;
    }
}

.container2 div {
    width: 50px;
}

HTML代码：

<div class="container1">
  <div>short</div>
  <div>looooooooooooooong</div>
</div>
<div class="container2">
  <div>short</div>
  <div>looooooooooooooong</div>
</div>

效果展示

问题解答 #

1. 为什么flex-basis:0没覆盖width？

flex-basis是flex项目主尺寸的首选值，但它不会直接“覆盖”width——width在这里会成为最小主尺寸约束（相当于隐式的min-width）。当flex-basis设为0时，flex项目的初始基准尺寸是0，但浏览器在计算最终尺寸时，会先满足项目的最小尺寸要求。你设置的width:50px固定了这个最小宽度下限，超过了子元素自身内容的宽度，所以最终尺寸会以此为基础分配剩余空间。

2. 为什么flex-basis:0没让假设主尺寸为0，进而无需width实现等宽？

核心原因是浏览器的默认样式：flex项目默认带有min-width: auto，这个值会让项目的最小宽度等于自身内容的固有宽度（比如第二个子元素的长文本宽度远大于第一个）。

在container1中，两个子元素的最小宽度由各自内容决定，即使flex-basis:0，分配空间时也会先满足内容的最小宽度需求，剩余空间再按flex-grow:1分配，最终导致宽度不等。而container2中设置的width:50px给两个项目统一了最小宽度，所以它们会基于相同的基准扩展，实现等宽。

如果想不用width就实现等宽，只需给flex项目添加min-width:0，打破浏览器默认的最小宽度约束，让flex-basis:0真正生效，此时两个项目会从0开始分配剩余空间，实现完全等宽。修改后的关键CSS如下：

.container1 div {
    margin: 1px;
    flex: 1 1 0;
    min-width: 0; /* 添加此行 */
}

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