Flex子项添加padding后无法均等收缩，如何实现均等伸缩？

原问题代码 #

CSS代码 #

.flex-container {
  display: flex;
  width: 200px;
  height: 100px;
  padding: 10px;
  background-color: green;
}
.flex-item {
  min-width: 0;
  height: 100%;
  flex: 0 1 50%;
}
.flex-item-1 {
  margin-right: 50px;
  background-color: red;
}
.flex-item-2 {
  padding-left: 50px;
  background-color: rgb(15, 36, 221);
}

HTML代码 #

<div class="flex-container">
  <div class="flex-item flex-item-1"></div>
  <div class="flex-item flex-item-2"></div>
</div>

解决方案：让含padding的Flex子项均等伸缩 #

可以实现，问题根源在于默认的box-sizing: content-box——此时flex-basis的计算仅基于内容区域，padding会额外占用空间，导致子项实际宽度超出预期，无法均等收缩。

只需给所有flex子项添加box-sizing: border-box，让padding包含在flex-basis指定的尺寸内，就能实现均等的伸展/收缩：

修改后的CSS代码 #

.flex-container {
  display: flex;
  width: 200px;
  height: 100px;
  padding: 10px;
  background-color: green;
}
.flex-item {
  min-width: 0;
  height: 100%;
  flex: 0 1 50%;
  box-sizing: border-box; /* 关键添加项 */
}
.flex-item-1 {
  margin-right: 50px;
  background-color: red;
}
.flex-item-2 {
  padding-left: 50px;
  background-color: rgb(15, 36, 221);
}

原理说明 #

• box-sizing: border-box会让元素的总宽度（内容+padding+border）等于width或flex-basis设置的值，不再额外累加padding。
• 此时两个子项的flex-basis:50%都会包含自身的内部padding空间，容器分配空间时会按比例均等处理，收缩和伸展行为保持一致。

如果不想全局设置border-box，也可以单独给带padding的子项设置，但统一给flex子项设置更稳妥。

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