嵌套的 FlexBox 中 flex-basis 的 BUG
oldshensheep · oldshensheep · 2022-10-21 22:25:06 +08:00 · 1038 次点击这是一个创建于 764 天前的主题，其中的信息可能已经有所发展或是发生改变。
最近写前端，遇到了一个问题，具体问题就是 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/
 |
1
P233 2022-10-21 23:21:43 +08:00  1
我的理解，是不是给 .container2 加一个 overflow: auto 就可以了？
|
 |
2
oldshensheep OP 我那个例子是可以的，也可以指定 width:0,min-width:0 等等。不过相关 BUG 里的这个 http://codepen.io/anon/pen/wBJQap
这里要手动指定 width ，flex-basis 无效 |
|
3
oldshensheep OP @P233 忘了 @了
|
 |
4
gydi 2022-10-22 00:12:23 +08:00 1
理解下来是，有父 flex ，子 flex ，孙 item 。当设置子 flex 的宽度为 auto/content 时，这时计算子 flex 的实际宽度时，就会拿孙 item 的 min content 去计算，但是孙 item 的 flex-basis 在这时并不会生效，在计算孙 item 的实际宽度时，flex-basis 才生效。
|
|
5
gydi 2022-10-22 00:16:06 +08:00
于是又测试了一下，有父 block ，子 inline-flex ，孙 item 。同样子的宽度为 auto ，孙 item 设置 flex-basis ，一样出现这个问题。
|
|
6
oldshensheep OP @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 这里面比较奇怪的现象。 |
 |
7
ymcz852 2022-10-23 00:31:18 +08:00 via iPhone
Width:0 生效能理解，Min-width：0 也可以生效就不懂了
|
Select Language