关于 flex 布局子元素宽度超出父元素问题

285 阅读1分钟

为什么flex子元素超出容器宽度但不根据 flex-shrink 属性进行收缩

原因是浏览器默认为flex容器的子元素设置了 "min-width: auto;min-height: auto", 即flex子元素的最小宽度高度不能小于其内容的宽高, 在规范里的表述是:
A flex item cannot be smaller than the size of its content along the main axis.
所以通过设置 min-width: 0, 覆盖这个默认设置, flex-shrink属性就能生效了
具体参考这个回答:[html - Why don't flex items shrink past content size? - Stack Overflow](stackoverflow.com)