flex布局子元素宽度超出父元素flex1不生效问题

一、问题引入

最近在做项目中，使用flex布局遇到了个老问题：当flex子元素里的子元素的宽度过大，超出flex父元素时，设置flex:1并不能限制flex子元素的尺寸；

二、解决方案

为什么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)