Html 尽管“flex:1”和“flex-basis:0”，Flexbox子项并不相等`

我有一个

flexbox

，有两个孩子。我希望两个孩子都有相同的尺寸，尽管一个有填充物，另一个没有

这是一个演示。我希望蓝色和绿色框的大小相等：

html，主体，.container{
保证金：0；
宽度：100%；
身高：100%；
}
.集装箱{
显示器：flex；
}
.货柜组{
弹性：1；
最小宽度：0；
弹性基准：0；
}
.首先{
背景：矢车菊蓝；
}
.第二{
背景：浅绿色；
填充：100px；
}

---

您需要两个div都是50%（flex:1），然后在第二个具有填充的div中有另一个div。这样一来，两个父对象都具有相同的宽度，而第二个父对象具有相同的填充

html，主体，.container{
保证金：0；
宽度：100%；
身高：100%；
}
.集装箱{
显示器：flex；
}
.container>div{
弹性：1；
}
.首先{
背景：矢车菊蓝；
}
.第二{
背景：浅绿色；
}
.second>div{
填充：100px；
}

第一
第二

可能有用：当你说

flex:1

时，这相当于

flex-grow:1

、

flex-shorn:1

和

flex-basis:0

。因此，在代码后面添加

flex-basis:0

是多余的。