具有填充和柔性增长的弹性项目的大小由flexbox spec中的计算确定.

这些计算类似于具有填充和柔性收缩的柔性项目的大小.

坦率地说,数学是非常技术性的,并不是世界上最容易理解的东西.

但是如果你想进入它,这里有详细信息：

> 9.7. Resolving Flexible Lengths
> How does flex-shrink factor in padding and border-box?

例子

以下是希望使行为更加清晰的示例.

注意：请记住,flex-grow不是直接确定弹性项目长度的工具.它是一个在flex容器中分配容器空间的工具. flex-basis属性设置弹性项的初始主要大小.如果flex-grow与flex-basis一起使用,问题中的问题就解决了(参见下面的例子#4).

示例#1

在块容器中,您有box-sizing: border-box,代码中的框将均匀呈现,而不管填充.

body > div {
  height: 50px;
  /* display: flex; */
  font-size: 0; /* remove inline block whitespace */
}
body > div > div {
  /* flex: 1; */
  Box-sizing: border-Box;
  height: 50px;
  display: inline-block;
  width: 50%;
}
#a {
  background-color: red;
}
#b {
  background-color: green;
}
#c {
  padding: 10px;
  background-color: blue;
}
#d {
  background-color: yellow;

<div>
  <div id="a"></div>
  <div id="b"></div>
</div>
<div>
  <div id="c"></div>
  <div id="d"></div>
</div>

jsFiddle demo

例#2

在Flex容器中,您有Box-sizing：border-Box,并且宽度或flex-basis用于计算长度,无论填充如何,框都将均匀呈现.

body > div {
  height: 50px;
  display: flex;
  }
 
body > div > div {
  flex-basis: 50%;
  /* width: 50%; this works,as well */
  Box-sizing: border-Box;
}
 
#a {
  background-color: red;
}
#b {
  background-color: green;
}
#c {
  padding: 10px;
  background-color: blue;
}
#d {
  background-color: yellow;

<div>
  <div id="a"></div>
  <div id="b"></div>
</div>
<div>
  <div id="c"></div>
  <div id="d"></div>
</div>

jsFiddle demo

例#3

在Flex容器中,你有盒子大小：border-Box和flex-grow,看起来盒子大小不起作用……

body > div {
  height: 50px;
  display: flex;
  }
 
body > div > div {
  flex: 1;
  /* flex-basis: 50%; */
  /* width: 50%; this works,as well */
  Box-sizing: border-Box;
}
 
#a {
  background-color: red;
}
#b {
  background-color: green;
}
#c {
  padding: 10px;
  background-color: blue;
}
#d {
  background-color: yellow;

<div>
  <div id="a"></div>
  <div id="b"></div>
</div>
<div>
  <div id="c"></div>
  <div id="d"></div>
</div>

jsFiddle demo

但那不是真的正确……

例#4

flex-grow根据Flex容器中的可用空间扩展Flex项的宽度.换句话说,它忽略了填充(and borders).

但是,如果您只是将flex-grow与flex-basis一起指定,则border-Box将起作用：

flex: 1 1 50%; /* flex-grow,flex-shrink,flex-basis */

body > div {
  height: 50px;
  display: flex;
  }
 
body > div > div {
  flex: 1 1 50%; /* flex-grow,flex-basis */
  /* flex-basis: 50%; */
  /* width: 50%; this works,as well */
  Box-sizing: border-Box;
}
 
#a {
  background-color: red;
}
#b {
  background-color: green;
}
#c {
  padding: 10px;
  background-color: blue;
}
#d {
  background-color: yellow;

<div>
  <div id="a"></div>
  <div id="b"></div>
</div>
<div>
  <div id="c"></div>
  <div id="d"></div>
</div>

jsFiddle demo