flex布局，每个子元素都设置为flex:1但却不能等分

Question

描述

2个子元素都是flex：1，按道理是一人一半嘛，问题来了，我给其中一个加一个： padding，然后就不是一人一半了，它变宽了，为啥，按道理应该是在flex：1里面自己padding，怎么又去挤占别的元素的空间了

期待的结果

1，为何如此？
2，不使用width：50%，仅使用flex能否解决不等宽的问题？

在线示例

https://codepen.io/l-raymond/...

代码示例

<div class='box'>
  <div class='c1'>
    c1c1c1c1c1c1
  </div>
  <div class='c2'>
    c2c2c2c2c2c2
  </div>
</div>

和

.box {
  display: flex;
}

.c1 {
  flex: 1;
  background: red;
  padding-left: 700px;
  flex-basis: 50%;
}

.c2 {
  flex: 1;
  background: green;
  flex-basis: 50%;
}

* {
  box-sizing: border-box;
}

Answer 1

你大概对flex有误解，flex: 1相当于flex-grow: 1,看看MDN对它的解释：

CSS属性 flex-grow设置了一个flex项主尺寸的flex增长系数。它指定了flex容器中剩余空间的多少应该分配给项目（flex增长系数）。

重点——剩余空间，这是指定怎么分配剩余空间的，不是先分配好空间

已参与了 SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入

Answer 2

我的理解是，
flex:1 是对剩余空间的均分，padding-left 不参与剩余空间的均分过程。

想要padding均分效果，建议再加一层div，padding写到里面。像这样:

---

已参与了 SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入。

Answer 3

因为 依照 flex 的自动调整计算规范是不包含 padding 的

Determine the available main and cross space for the flex items. For each dimension, if that dimension of the flex container’s content box is a definite size, use that; if that dimension of the flex container is being sized under a min or max-content constraint, the available space in that dimension is that constraint; otherwise, subtract the flex container’s margin, border, and padding from the space available to the flex container in that dimension and use that value. This might result in an infinite value.

w3 规范这里的部分提到 flexItem 的可用空间要减去 margin、border、padding。

具体可以看一下两份链接：
CSS Flexible Box Layout Module Level 1 - w3.org
html - How to get flexbox to include padding in calculations? - Stack Overflow

已参与了 SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入。