Question

我想了解为什么父Flex容器的宽度指定为＆＃34; max-content ＆＃34;宽度不同于单独的不灵活的儿童柔性物品。

根据我对Flexbox intrinsic size specification的理解，孩子的宽度正确，但是父母没有遵守孩子的主要尺寸最大内容贡献。

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

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

Answer 2

目前，max-content值在主要浏览器中支持不足。

目前：

Edge
它在Firefox中有很多问题
在Chrome和Safari中存在一些问题

请点击此处查看完整图片：https://caniuse.com/#search=max-content

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

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

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

＆＃13;

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

＆＃13;

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

2 个答案: