如何在含padding的Flexbox项目中维持flex-grow定义的宽度比例？

嘿，这个问题我碰到过好多次了——当flex项目加了padding之后，原本用flex-grow定义的宽度比例就跟着容器宽度乱飘，根本没法稳定维持，对吧？

本质原因其实很简单：默认情况下flex项目的flex-basis是auto，它会基于项目的内容（包括padding）来计算初始宽度，而flex-grow是在容器的剩余空间里按比例分配。padding的存在会让第一个项目的初始宽度变大，导致剩余空间的分配比例被打乱，容器宽度一变，比例自然就歪了。

给你两个实测有效的解决办法：

方法一：设置flex-basis: 0+box-sizing: border-box（最推荐） #

直接给每个flex项目加上flex-basis: 0，强制让flex-grow完全基于0这个初始值来分配空间，再搭配box-sizing: border-box让padding包含在项目的宽度内，这样比例就能牢牢固定住了。修改后的代码如下：

<div style="display: flex;">
  <div style="flex-grow: 3; flex-basis: 0; box-sizing: border-box; padding: 4rem; background-color: red;">
  </div>
  <div style="flex-grow: 2; flex-basis: 0; background-color: green;">
  </div>
</div>

拆解一下关键点：

• flex-basis: 0：把项目的初始宽度重置为0，让flex-grow的比例计算完全不受内容、padding的干扰
• box-sizing: border-box：让padding不会额外撑开项目的总宽度，而是从flex-grow分配到的空间里占用，保证两个项目的整体宽度比例始终是3:2

方法二：嵌套容器分离比例与padding #

如果你不想改动box-sizing的默认值，也可以用嵌套容器的思路：外层容器负责维持flex比例，内层容器专门处理padding和内容。这样外层项目的宽度完全由flex-grow控制，padding只影响内部区域，不会干扰比例计算。代码示例：

<div style="display: flex;">
  <div style="flex-grow: 3; background-color: red;">
    <div style="padding: 4rem;">
      <!-- 这里放你的内容 -->
    </div>
  </div>
  <div style="flex-grow: 2; background-color: green;">
  </div>
</div>

两种方法都能完美解决你的问题，第一种更简洁高效，第二种适合需要保留默认盒模型的场景，根据你的实际需求选就好～

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