flex-grow属性不是为精确调整flex项的大小而设计的。它的工作是将容器中的空间分配给Flex项。因此，flex-grow不是这项工作的最佳工具。
相反，使用flex-basis，它相当于Flex容器中的width或height（取决于flex-direction）。
然后添加box-sizing: border-box将padding集成到flex项的宽度中。
revised fiddle demo

<div style="display: flex;">
  <div style="flex-basis: 60%; padding: 4rem ; background-color: red; box-sizing: border-box;">
  </div>
  <div style="flex-basis: 40%; background-color: green;">  
  </div>
</div>

使用width（或flex-basis）代替flex-grow：

* {
  box-sizing: border-box; /* Don't forgert this to include padding/border inside width calculation */
}

<div style="display: flex;height:20px;margin-bottom:10px;">
  <div style="flex-grow: 3;  background-color: red;">
  </div>
  <div style="flex-grow: 2; background-color: green;">
  </div>
</div>
replace by width
<div style="display: flex;height:20px;margin-bottom:10px;">
  <div style="width:calc((3 / 5) * 100%);  background-color: red;">
  </div>
  <div style="width:calc((2 / 5) * 100%); background-color: green;">
  </div>
</div>
then add padding
<div style="display: flex;margin-bottom:10px;">
  <div style="width:calc((3 / 5) * 100%); padding:3rem; background-color: red;">
  </div>
  <div style="width:calc((2 / 5) * 100%); background-color: green;">
  </div>
</div>
same result with flex-basis
<div style="display: flex;margin-bottom:10px;">
  <div style="flex-basis:calc((3 / 5) * 100%); padding:3rem; background-color: red;">
  </div>
  <div style="flex-basis:calc((2 / 5) * 100%); background-color: green;">
  </div>
</div>

我通常在内部项目的内部标签中做填充样式：

<div style="display: flex;">
  <div style="flex-grow: 3; background-color: red;">
    <div style="padding: 4rem;">Some content</div>
  </div>
  <div style="flex-grow: 2; background-color: green;">
    Some content
  </div>
</div>