flex布局下子元素设置宽度不生效?

当父元素设置为:

display: flex;

时, 子元素默认存在flex属性, 并且值为：

flex: 0 1 auto;

其中第二个值 —— 1 代表的是flex-shrink属性值.
查看mdn该属性介绍：

CSS flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

因此, 如果需要设置子元素宽度, 改变此值为0即可：

flex: 0 0 auto;