为什么具有 max-content 的 Flex 容器的宽度与 Flex Item 的宽度不同？

Question

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

根据我对 Flexbox内在尺寸规范的理解，子级具有正确的宽度，但父级不尊重子级的主尺寸最大内容贡献。

这是 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

目前，该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 */

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

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