1

我想了解为什么宽度指定为“ 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>

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

4

2 回答 2

4

目前，该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改用：

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

于 2018-02-08T17:52:21.957 回答
1

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

于 2018-02-08T16:19:26.107 回答