最近写前端,遇到了一个问题,具体问题就是 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 最早源于在 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 也可以生效就不懂了
|