CSS Flex Layout 中 flex item 的宽度表现

[shhider]

问题

设置 overflow 为 auto 或scroll，仍然会撑开 flex item

原因

flex item 是指 display 属性为 flex或inline-flex 的元素的子元素；

flex item 自带的默认属性是：

flex-grow: 0; // 不会增长
flex-shrink: 1; // 会塌缩
flex-basis: auto; // 初始的宽度

min-width: auto; // 原来是并没有 auto 取值的，flex layout 规范加了这个。。。

这种情况下，flex-basis 决定了 flex item 的宽度将首先取决于内容的宽度。

flex-basis:

• 如果是 auto，那么 width 是有用的；
• 设置了具体的数值，则 width 将不起作用；

min-width设置为 非 auto 后，则元素的宽度从这个值开始算，

优先级：min-width/max-width > flex-basis > width

？？为什么 flex item 要把 min-width 设置为 auto 呢？和 none 有什么区别？

min-width 为 auto 时，其计算值将使用元素的最小内容宽度。如果有设置百分比或具体数值的宽度，则在设置的宽度与最小内容宽度中取较小值。如果元素内没有内容，计算值则是0。

所以在前文所描述的问题下，min-width 的值是默认的auto，因此计算后元素最小宽度是最小内容宽度。这种情况下，显式的设置 min-width 为数值或百分比，就没有了这一特性。弹性元素在扩大过程中，遇到父元素的边界也就停止了继续扩大。

Reference

• CSS Flexible Box Layout Module Level 1