Html 具有动态高度的柔性包裹

当

.container

的高度与

.resize

包装的底部相交时，我试图使

div

元素水平分布

当我拖动窗口以缩小

.container

的高度时，当

.container

的底部与

的底部相接时，我还想收缩
.resize
包装。resize

包装，以便元素

柔性包装

和水平分布与

容器的动态高度成比例


正文{
位置：绝对位置；
溢出：隐藏；
显示器：flex；
弯曲方向：立柱；
排名：0；
左：0；
右：0；
底部：0；
}
.集装箱{
弹性：1；
边框：2件纯蓝；
}
.调整大小{
显示器：flex；
高度：自动；
弯曲方向：立柱；
柔性包装：包装；
边框：2px实心#f00；
}
.resize>div{
边框：2px实心#555；
flex:0自动；
背景色：#ccc；
高度：100px；
宽度：100px；
}

1.
2.
3.
我认为flexbox无法做到这一点

您想要的是行方向的。（在此过程中水平收缩窗口）

但它在列方向上不起作用。（在此方向上垂直收缩窗口）

这可能是flexbox在
列环绕模式下的另一个缺陷。以下是其他几点：