父元素使用flex子元素width失效？

解答思路

Flex 子项默认具有 flex-shrink: 1，当空间不足时会被压缩，看起来就像设置的 width 失效；给子元素加上 flex: none（即 flex-grow: 0; flex-shrink: 0; flex-basis: auto），禁止其在极端情况下被拉伸/压缩即可解决。

详细说明

• 在空间充足的情况下，子元素设置的 width 一般能正常显示；但当父容器空间不足（极端情况）时，Flex 布局会依据子项的 flex-shrink 权重自动压缩子元素宽度，让所有子项适配容器宽度，这就是宽度看起来失效的原因。
• 加上 flex: none 后，子元素不再参与自动伸缩（既不会被拉伸变大，也不会被压缩变小），会严格按照设置的 width 展示，即使父容器空间不够也不会自动缩放变形。
• 可以参考这个在线示例查看效果对比：jsfiddle 演示。

小结

Flex 子元素的 width 在空间不足时会被默认的伸缩行为覆盖，如果希望宽度严格生效、不被压缩变形，给对应子元素加上 flex: none 即可。