Flex父容器内子元素设置的Width CSS属性不生效如何解决

问题原因 #

Flex容器的子元素默认带有flex-shrink: 1属性，这个属性的作用是当所有子元素总宽度超过容器宽度时，自动压缩子元素尺寸来适配容器宽度，所以你给按钮设置的width: 500px没有生效，按钮被压缩得很窄。

解决方法 #

给按钮添加flex-shrink: 0关闭自动收缩即可，你可以根据需求选择以下两种配置：

• 想要按钮保持你设置的固定宽度：保留原有的width: 500px，新增flex-shrink: 0属性
• 想要按钮宽度和未设置display:flex时完全一致，随内容自适应：删除width: 500px，仅添加flex-shrink: 0属性

另外你当前写的overflow-y: auto是纵向滚动配置，如果你想要横向滚动查看超出300px宽度的按钮，建议改成overflow-x: auto更符合预期。

修改后的完整CSS代码示例：

.container {
  display: flex;
  max-width: 300px;
  overflow-x: auto;
}

.container button {
  flex-shrink: 0;
  /* 如果需要固定宽度就保留下面这行，不需要就删掉 */
  width: 500px;
}

内容的提问来源于stack exchange，提问作者Husdady