Html flexbox边距导致溢出

我有一个flexbox溢出的小问题：

html

<div class="first">
            <div class="child"></div>
            <div class="child"></div>
            <div class="child"></div>
</div>

问题是，最后一个孩子是溢出的，为什么？？我用盒子尺寸来框边盒子

如何在不导致溢出的情况下在子级之间添加边距

我想这就是你想要做的：

*{
框大小：边框框；
}
身体{
利润率：50像素；
}
.首先{
显示器：flex；
flex-flow：行nowrap；
边框：1px纯绿色；
}
.孩子{
背景：红色；
边框：1px蓝色实心；
高度：10px；
弯曲：1；/*等宽*/
右边距：10px；
}
.第一：最后一个孩子{
右边距：0；
}

框大小调整

对页边距没有影响！你想做什么？那么，如何在不造成溢出的情况下在子级之间添加边距呢

* {
    box-sizing: border-box;
}

body {
    margin: 50px;
}
.first {
    display: flex;
    flex-flow: row nowrap;
}

.child {
    background: red;
    border: 1px blue solid;
    height: 10px;
    flex: 0 0 33.3%;

    margin-right: 10px;
}

.first :last-child {
    flex: 0 0 33.4%;
}