为什么我的两个盒子在使用同一个css类时高度不同？

我不明白为什么我的FlexBox不都遵循相同的

填充底部
规则。只有一个类通过填充底部应用高度


.col-t{
宽度：100%
}
上校{
宽度：50%
}
主容器。网格。网格容器{
显示：-webkit flex；
显示器：flex；
-webkit flex流：行换行；
柔性流：行换行；
}
主容器。网格。网格容器。盒子{
-webkit-flex:1自动；
弹性：1自动；
位置：相对位置；
}
main#container.grid.grid container.box>div{
垫底：56.66666%；
}
r{
背景：红色；
}
.b{
背景：蓝色
}
p{
背景：紫色
}


是因为通过衬垫顶部和底部的高度是相对于
宽度

对

但如果是这样的话，怎么可能让所有的
使用百分比表示相同高度的框

由于
col-s-box
元素只有
col-t-box
宽度的一半，因此需要将其子对象的填充百分比翻倍，
padding-bottom:calc（2*56.66666%）
使它们具有与
列框
的子项相同的高度

堆栈片段


.col-t{
宽度：100%
}
上校{
宽度：50%
}
主容器。网格。网格容器{
显示：-webkit flex；
显示器：flex；
-webkit flex流：行换行；
柔性流：行换行；
}
主容器。网格。网格容器。盒子{
-webkit-flex:1自动；
弹性：1自动；
位置：相对位置；
}
main#container.grid.grid container.box>div{
垫底：56.66666%；
}
main#container.grid.grid container.col-s.box>div{
填充底部：钙（2*56.66666%）；/*添加*/
}
r{
背景：红色；
}
.b{
背景：蓝色
}
p{
背景：紫色
}