为什么具有 max-content 的 flex 容器的宽度与 flex 项的宽度不同？答案

【问题标题】：Why width of flex container with max-content has different width than flex item?为什么具有 max-content 的 flex 容器的宽度与 flex 项的宽度不同？
【发布时间】：2018-07-19 06:33:36
【问题描述】：

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

根据我对 Flexbox intrinsic size specification 的理解，孩子有正确的宽度，但父母不尊重孩子的主要尺寸 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>

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

【问题讨论】：

标签： css flexbox intrinsic-content-size

【解决方案1】：

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

【讨论】：

这就是答案。使用flex 时的第三个属性是您指定为100px 的元素的宽度。但它也有 200px 的宽度，父母可以看到。去掉 child 的 flex 属性，你会看到 parent 和 child 的宽度相同。

【解决方案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>

【讨论】：

是的，我认为这将是当前 Chrome 实现中的一个错误。