嵌套的 FlexBox 中 flex-basis 的 BUG

[oldshensheep]

最近写前端，遇到了一个问题，具体问题就是 flexbox 里的内容会 溢出 并撑大父盒子。
在网上找到的解决办法就是在父盒子上加上 width:0 ，但是如果按照 CSS 标准来实际上这是多余的。

在相关 BUG 的复现代码中 FlexInnerContainer 的大小是 138.113px （和字体大小相关）而不是 2 个FlexItem的大小 200px2*100p。

实际上他的大小是怎么来的呢，实际上是 FlexItem div 中的内容大小决定的。可以做如下验证：去掉 CSS 属性中 FlexItem 的 flex: 0 0 100px; 然后就会发现 FlexInnerContainer 的大小和 MMMMMMMMM 这几个字符的大小相等。

所以最终结论就是在嵌套的 flexbox 中父元素设置的 flex-basis 是无效的。

解决办法：设置父元素的 width 。

我的示例代码

https://gist.github.com/oldshensheep/6b3302207045538548291edfdb689dec.js
在线示例 https://codepen.io/oldshensheep/pen/eYrqgxP

相关 BUG

这个 BUG 最早源于在 2013 年，见 https://bugs.chromium.org/p/chromium/issues/detail?id=240765 暂未修复。

https://bugs.chromium.org/p/chromium/issues/detail?id=464210
复现代码 http://codepen.io/anon/pen/wBJQap

https://bugzilla.mozilla.org/show_bug.cgi?id=1055887

影响范围

BUG 暂未修复，应该快了。
现代的 Chrome 和 Firefox ，其他浏览器不了解

相关连接

flex-basis 定义 https://www.w3.org/TR/css-flexbox-1/#flex-basis-property
https://stackoverflow.com/questions/39884226/why-does-an-element-with-flex-1-width-0-still-have-width

建议浏览

https://stackoverflow.com/questions/34352140/what-are-the-differences-between-flex-basis-and-width 在Browser Bugs章节中可以看到更多信息。

吐槽

在查询过程中发现基本上没有中文没有讨论这个 bug 的……还好我英文不是问题……
但是英文内容一搜一大把……
中文找到的一个相关答案，但是他没有认为这个是 BUG 。https://yogwang.site/2022/CSS-flex-container-stretched-by-content/

[P233]

我的理解，是不是给 .container2 加一个 overflow: auto 就可以了？

[oldshensheep]

我那个例子是可以的，也可以指定 width:0,min-width:0 等等。不过相关 BUG 里的这个 http://codepen.io/anon/pen/wBJQap

这里要手动指定 width ，flex-basis 无效

[oldshensheep]

@P233 忘了 @了

[gydi]

理解下来是，有父 flex ，子 flex ，孙 item 。当设置子 flex 的宽度为 auto/content 时，这时计算子 flex 的实际宽度时，就会拿孙 item 的 min content 去计算，但是孙 item 的 flex-basis 在这时并不会生效，在计算孙 item 的实际宽度时，flex-basis 才生效。

[gydi]

于是又测试了一下，有父 block ，子 inline-flex ，孙 item 。同样子的宽度为 auto ，孙 item 设置 flex-basis ，一样出现这个问题。

[oldshensheep]

@gydi 差不多就是这个意思，现在这是一个 BUG ，会被修复。
其实简单来说就是 flex-basis 被忽略了。

引用 《 V2EX 不让我发链接，请不要在每一个回复中都包括外链，这看起来像是在 spamming 》 里的一段话：
> Is there any word on this bug?

I've just run into it... have a flex parent that is ignoring the flex-basis of the child :(

I've had to specify a width on the child instead of a flex-basis, as a temporary workaround.

正确的就是说计算子 flex 的实际宽度时应当取的是孙 item 的 flex-basis 值来计算。不然的话就会出现 相关 BUG 这里面比较奇怪的现象。

[ymcz852]

Width:0 生效能理解，Min-width：0 也可以生效就不懂了