有关flex布局子项padding问题

Question

父容器

<div class="father"></div>
.father {
    display: flex;
    width: 400px;
    height: 100px;
}

子容器

<div class="child">1</div>
<div class="child child-2">2</div>
<div class="child">3</div>
<div class="child">4</div>
.child {
    flex: 1;
    border: 1px solid black;
}
.child-2 {
    padding-left: 10px
}

结果

期望的结果

四个child宽度： (400 / 4)px; 第二个child的padding-left为10px；

实际结果

第二个child：(400 - 10) / 4 + 10 = 107.5px
其他三个child (400 - 10） / 4 = 97.5px

问题

1. 为什么会出现这种结果？
2. 当父级宽度不知的情况下，那我如何实现使用flex布局实现子项大小一样，各自边距不同的情景？

对于问题2，自己有一个方案是为child添加一个子项 宽、高为100%，为其添加样式；不过这样dom层级就变深了；

Answer 1

以下为个人理解:
1.子项目设置了flex: 1; 即flex-grow, flex-shrink 和 flex-basis的值分别为1, 1, auto。flex-basis不使用 box-sizing 来改变盒模型的话，那么这个属性就决定了元素的内容盒（content-box）的宽。所以, 子项目初始大小会是这样的:

flex-grow, flex-shrink为1时, 表示若父容器有剩余空间时，等比例瓜分剩余空间，剩余空间不足时（不换行），等比例缩小子项目。所以效果就是第二个项目多出了10px

2.父级宽度不知的情况下，那我如何实现使用flex布局实现子项大小一样，各自边距不同的情景？
要实现子项目大小一样, 则必须保证flex-basis得到算出的宽度一致, 然后瓜分到的剩余空间一致. 我的解决方案是设置box-sizing: border-box; 然后flex-basis设置一个值(这里的话我会设置成25%)