如果子元素的宽度的总和超过父容器,flex-grow 将不生效。

父容器总宽度为 500px,现在为每个item的宽设置为300px

div1: 宽250px
div2: 宽250px

父容器总宽度为 500px,现在为每个item的宽设置为300px

同时定义了 item1 和 item2 的 flex-shrink 的属性分别为1和4。

100为 = |父容器宽度 - 子元素的总宽度| = |500 - 600| = 100

div1宽: 300px - 100/5*1 = 280px
div2宽: 300px - 100/5*4 = 220px

设置项目的 flex-shrink 为0

项目的 flex-shrink 设为0来看下不压缩

div1: 宽300px 不压缩
div2: 宽300px 不压缩