Flexbox布局问题：指定宽度类未生效，其余项无法均分剩余空间

嘿，我完全懂你遇到的困惑——明明给子项加了small类设置5%宽度，结果它还是和其他子项一起均分空间，甚至加了!important都没用。这其实是Flexbox的属性优先级和相互作用在搞怪，咱们来拆解问题并解决它：

问题根源 #

在Flex容器中，当元素作为flex子项时，flex-basis的优先级会高于width（水平布局时）。你的.auto类里设置了flex-grow: 1（允许子项抢占剩余空间）和flex-basis: auto，这就意味着哪怕你给子项加了width:5%，flex布局会优先用flex-basis作为基准尺寸，再加上flex-grow:1让子项填满剩余空间，直接把你设置的width覆盖了——哪怕加!important也没用，因为Flexbox的布局规则优先级更高。

解决方案 #

我们需要修改small类的flex属性，让它不参与剩余空间的分配，同时指定它的基准尺寸：

方案1：用flex属性替代width（推荐） #

直接给small类设置flex-grow:0（禁止它扩展抢占空间），并把flex-basis设为你想要的宽度，这样既符合Flexbox的布局逻辑，又能实现需求：

.flex-container { 
  background-color: #F4F7F8; 
  resize: horizontal; 
  overflow: hidden; 
  display: flex; 
  margin: 1em; 
} 

.auto { 
  flex: 1; /* 简写等价于flex-grow:1; flex-shrink:1; flex-basis:0%，确保所有子项均分空间 */
  border: 5px solid black; 
} 

.small { 
  flex-grow: 0; /* 禁止扩展，只占用指定空间 */
  flex-basis: 5%; /* 设置基准宽度，替代width */
}

方案2：保留width，但禁用flex-grow #

如果你坚持想用width，那必须同时禁用flex-grow，让子项不再抢占剩余空间：

.small { 
  flex-grow: 0; /* 关键：关闭扩展 */
  width: 5%; 
}

额外优化建议 #

你原来的.auto类里的flex-grow:1; flex-shrink:1; flex-basis:auto其实可以用简写flex:1替代，但注意flex:1的flex-basis是0%，这会让所有子项严格均分剩余空间（不管内容多少），比flex-basis:auto更符合你“默认每个子项尺寸相同”的需求。

修改后的完整代码运行后，small子项会固定占据5%宽度，剩下的两个auto子项会均分剩余的95%空间，完美实现你的需求~

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