flex-basis:vs width、百分比与 content 回退
flex-basis 定的是 item 在主轴上的初始尺寸（grow / shrink 在此基础上增减）。它有三处易被忽略的细节：与 width 同时存在时谁说了算、百分比在容器尺寸不确定时会悄悄退回 content、以及由此引出的
flex: 1 里 0 与 0% 的真实差异。下面每处都用实测呈现。
1 · 0 vs 0%：同写 flex: 1，结果可能不同
两个容器都是 flex-direction: column 且不设高度（高度不确定），内部 section 设 min-height: 200px、里面塞一个 height: 300px 的内容块。唯一差别：左 flex-basis: 0、右 flex-basis: 0%。section 高度为真实 getBoundingClientRect 实测。
为什么不同？ 0 是绝对长度:section 初始主轴尺寸为 0，因容器高度不确定、没有可分配的剩余空间，最终落到 min-height: 200px（内容 300px 溢出，靠 overflow: auto 滚动）。0% 是百分比：容器高度不确定时，它解析回 content，于是 section 初始尺寸 = 内容高度 300px。因为 flex: 1 浏览器展开成 1 1 0%（而非规范的 1 1 0），这个差异会真实影响列向、无定高的布局。
百分比解析规则（MDN 原文）： “Percentage values of flex-basis are resolved against the flex container. If the flex container's size is indefinite, the used value for flex-basis is content.”
即：百分比相对容器主轴内尺寸解析；容器该方向尺寸不确定（如列向容器未设高度）时，used value 退回 content（按内容定尺寸）。
2 · flex-basis vs width：谁优先
item 同时设了 width: 300px 与可切换的 flex-basis（容器定宽 400px，故百分比可正常解析）。item 不伸不缩(flex-grow/shrink: 0)，其主轴尺寸即 used basis。看实测宽度跟谁走。
flex-basis |
used 主轴尺寸 | 说明 |
|---|---|---|
auto |
取自 width: 300px |
basis 为 auto 时回退到 width（无 width 再回退到内容）。
|
非 auto（如 120px / 50%） |
flex-basis 胜出
|
同时设了 width 也被 flex-basis 覆盖；此时约束主尺寸的是 min-width / max-width 的夹取，width 本身不再参与主轴定尺（但会作为 specified size suggestion 参与 min-width: auto 的计算）。 |
两个补充事实。 其一，flex-basis 与 width 同规则解析：默认量的是 content box，box-sizing: border-box 下量的就是 border box。其二，flex item 默认不会收缩到 content-based minimum size 以下——即便 flex-shrink 生效、basis
很小，也会被内容最小尺寸顶住。解除下限有两条路：显式 min-width: 0（列向 min-height: 0），或让该项的 overflow 成为可滚动值（hidden / auto / scroll）——规范对自动最小尺寸的定义本就限定在「overflow 为非滚动值」的项上。
3 · content 关键字
flex-basis: content 显式声明「按内容定初始尺寸」，忽略 width。它正是上面百分比在容器尺寸不确定时退回的那个值。日常较少直接写，但理解它有助于解释 0% 的行为。
4 · 小结
flex 简写一页 讲清了 flex: 1 = 1 1 0% 的来源，本页解释了这个 0% 为何不等于 0。