V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
oldshensheep
V2EX  ›  程序员

嵌套的 FlexBox 中 flex-basis 的 BUG

  •  
  •   oldshensheep ·
    oldshensheep · 2022-10-21 22:25:06 +08:00 · 1031 次点击
    这是一个创建于 755 天前的主题,其中的信息可能已经有所发展或是发生改变。

    最近写前端,遇到了一个问题,具体问题就是 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-widthBrowser Bugs章节中可以看到更多信息。

    吐槽

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

    7 条回复    2022-10-23 00:31:18 +08:00
    P233
        1
    P233  
       2022-10-21 23:21:43 +08:00   ❤️ 1
    我的理解,是不是给 .container2 加一个 overflow: auto 就可以了?
    oldshensheep
        2
    oldshensheep  
    OP
       2022-10-21 23:58:31 +08:00
    我那个例子是可以的,也可以指定 width:0,min-width:0 等等。不过相关 BUG 里的这个 http://codepen.io/anon/pen/wBJQap

    这里要手动指定 width ,flex-basis 无效
    oldshensheep
        3
    oldshensheep  
    OP
       2022-10-21 23:59:04 +08:00
    @P233 忘了 @了
    gydi
        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 才生效。
    gydi
        5
    gydi  
       2022-10-22 00:16:06 +08:00
    于是又测试了一下,有父 block ,子 inline-flex ,孙 item 。同样子的宽度为 auto ,孙 item 设置 flex-basis ,一样出现这个问题。
    oldshensheep
        6
    oldshensheep  
    OP
       2022-10-22 00:32:38 +08:00
    @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
        7
    ymcz852  
       2022-10-23 00:31:18 +08:00 via iPhone
    Width:0 生效能理解,Min-width:0 也可以生效就不懂了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2689 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 15:44 · PVG 23:44 · LAX 07:44 · JFK 10:44
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.