为什么具有最大内容的弹性容器的宽度与弹性项目的宽度不同？

Question

我想了解为什么宽度指定为“max-content”的父弹性容器与单独的不灵活子弹性项目的宽度不同。

根据我对 Flexbox 的理解 intrinsic size specification，子项的宽度正确，但父项不尊重子项的 main-size max-content 贡献。

这是 JSFiddle：https://jsfiddle.net/c0f5xwn0/

<div style="width:max-content; display:flex;border:1px green solid;">
    <div style="height:100px; flex:0 0 100px; border:1px red solid; width:200px">Why parent div has more width than child?</div>
</div>

有人可以解释一下这背后的原因吗？

Answer 1

child div 的宽度被声明为 200px。 child div 中的内容被限制为 flex:0 0 100px。 parent div 调整 width:200px 属性。通过将 width 更改为 100px，parent div 现在大小相同。

Answer 2

目前，max-content 值在主要浏览器中的支持较弱。

目前：

Edge 不支持
它在 Firefox 中有很多问题
它在 Chrome 和 Safari

完整图片请看这里：https://caniuse.com/#search=max-content

假设您在 Chrome 中进行测试，主要问题是您对 flex-basis 属性的使用。弹性项目有：

flex: 0 0 100px /* fg: 0, fs: 0, fb: 100px */

根据上面链接的文档，max-content 无法识别 Chrome 中的 flex-basis。因此，请改用 width：

<div style="width:max-content;display:flex;border: 1px green solid;">
    <div style="height:100px;width: 100px;border: 1px red solid;">Why parent div has more width than child?
  </div>
</div>

为什么具有最大内容的弹性容器的宽度与弹性项目的宽度不同？

Why width of flex container with max-content has different width than flex item?

css

flexbox

intrinsic-content-size