Flex行容器中子元素宽度无法设置为指定值的问题

问题场景 #

我编写了如下CSS代码，期望子元素.result宽度固定为400px，但实际设置未生效，且页面出现横向滚动条：

#app {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 20px;
  margin: 20px auto 20px auto;
  max-height: 400px;
  max-width: 400px;
  overflow-y: scroll;
}
.result {
  font-weight: 300;
  width: 400px;
  padding: 20px;
  text-align: center;
  background: #eceef0;
  border-radius: 10px;
}

问题原因 #

1. Flex收缩机制：Flex容器默认给子元素设置flex-shrink:1，当容器内部空间不足时，子元素会自动收缩，导致手动设置的width:400px被覆盖。
2. 盒模型溢出：父容器的padding:20px、子元素的padding:20px以及gap:10px都未被纳入宽度计算，实际总宽度超过了父容器的max-width:400px，触发横向滚动。

修复方案 #

方案1：强制保留子元素宽度，避免溢出 #

通过禁止子元素收缩、修改盒模型规则，确保设置的宽度生效且不溢出容器：

#app {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 20px;
  margin: 20px auto;
  max-height: 400px;
  max-width: 400px;
  overflow-y: scroll;
  box-sizing: border-box; /* 让padding包含在max-width范围内 */
}
.result {
  font-weight: 300;
  width: 400px;
  padding: 20px;
  text-align: center;
  background: #eceef0;
  border-radius: 10px;
  flex-shrink: 0; /* 禁止Flex收缩，强制保留设置的宽度 */
  box-sizing: border-box; /* 让padding包含在width范围内 */
}

方案2：适配容器宽度，保持视觉效果 #

如果希望子元素不超出父容器，同时保持内部内容区域的视觉宽度为400px，可调整父容器宽度或子元素宽度规则：

#app {
  /* 其他属性不变 */
  max-width: 440px; /* 400px内容宽度 + 左右各20px padding */
  box-sizing: border-box;
}
.result {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  /* 其他属性不变 */
}

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