Flex容器内按钮无法设置宽度的问题求助

你遇到的问题是flex布局的默认行为导致的：

• 当按钮作为flex容器的子项时，默认flex-shrink属性值为1——如果容器空间不足，flex子项会自动收缩，哪怕你设置了width也会被覆盖。
• 按钮移出flex容器后，脱离了flex布局规则，width设置遵循常规CSS盒模型，自然能正常生效。

解决办法（二选一即可） #

方法1：阻止按钮收缩

给按钮添加flex-shrink: 0，强制它不被压缩，width设置就能正常生效：

button[id*='button-'] {
  background-color: red;
  height: 10vh;
  width: 50px; /* 替换成你需要的实际宽度 */
  border: none;
  flex-shrink: 0; /* 关键代码 */
}

方法2：用flex-basis设置基准宽度

在flex布局中，flex-basis是专门定义flex子项基准尺寸的属性，优先级高于width，直接设置它也能达到效果：

button[id*='button-'] {
  background-color: red;
  height: 10vh;
  flex-basis: 50px; /* 设置基准宽度 */
  border: none;
  flex-shrink: 0; /* 可选：如果需要固定宽度不随容器变化，加上这个 */
}

另外注意你原代码里width: 109000px这个值过大，实际使用时建议改成符合设计需求的合理数值，比如50px、80px这类。

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