具有动态高度的柔性包装

Question

当div的高度达到.container包装器的底部时，我试图使.resize元素水平分布。

当我拖动窗口以缩小.container的高度时，我想同时缩小.resize的底部与{ {1}}包装器，以便元素.container和.resize的动态高度成比例地水平分布。

flex-wrap

.container

Answer 1

我不认为flexbox可以做到这一点。

您想要的行方向是可能的。 （在此demo中水平缩小窗口）

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

这可能是column wrap模式下flexbox的另一个缺陷。这里是其他几个：

• When flexbox items wrap in column mode, container does not grow its width
• Flexbox: wrong width calculation when flex-direction: column, flex-wrap: wrap
• Height of flex container not working properly in Safari
• Is it possible for flex items to align tightly to the items above them?
• flex-wrap not working in nested flex container