Javascript 如何为包含具有内联块显示的对象的div设置固定高度和自动宽度？

通常情况下，如果有一个具有固定宽度和自动高度的div，并在其中添加具有定义的宽度和高度以及内联块显示的对象，则这些对象会在div中并排添加，直到其超出宽度，并且高度会自动增加，以便可以在下方容纳它们

我想找出一种方法来逆转这个功能。具有固定高度和自动宽度的div。当对象（具有定义的宽度和高度以及内联块显示）被添加到其中时，它们会被添加到彼此的下方，直到div超出高度，然后宽度会自动增加，以便从右上角容纳它们。我尝试了下面的例子，但没有成功

css（不起作用）

---

宽度没有增加，导致div垂直溢出。我知道这些天我想做的事情很普遍，虽然我不记得我最后一次在哪里见过它。也许它需要javascript。我对任何事情都开放。有人能帮忙吗

不需要Javascript，我们可以通过CSS列来实现这一点

在父元素上，设置最大宽度，并指定列宽（可能需要包含供应商前缀）

示例JSFIDLE：

---

不需要Javascript，我们可以通过CSS列来实现这一点

在父元素上，设置最大宽度，并指定列宽（可能需要包含供应商前缀）

示例JSFIDLE：

---

这是一个很好的例子，说明了什么地方可以派上用场：

.testbox{
显示器：flex；
弯曲方向：立柱；
柔性包装：包装；
调整内容：灵活启动；
高度：300px；
背景：巧克力；
}
.项目{
宽度：100px；
高度：120px；
利润率：15px；
背景：米色；
}

1 Lorem ipsum dolor sit amet。
2 Soluta officia aut dolorem，doloribus！
3 Accusamus et quibusdam aliquid ullam。
4个时间单位减去ut？
第五章身体劳动。

这是一个很好的例子，说明了什么地方可以派上用场：

.testbox{
显示器：flex；
弯曲方向：立柱；
柔性包装：包装；
调整内容：灵活启动；
高度：300px；
背景：巧克力；
}
.项目{
宽度：100px；
高度：120px；
利润率：15px；
背景：米色；
}

1 Lorem ipsum dolor sit amet。
2 Soluta officia aut dolorem，doloribus！
3 Accusamus et quibusdam aliquid ullam。
4个时间单位减去ut？
第五章身体劳动。

这个用例看起来不错，但大多数主流浏览器只提供对css列的部分支持-这个用例看起来不错，但大多数主流浏览器只提供对css列的部分支持-

.div {

    height:300px;
    width:auto;

}

.parent {
   width: 300px;
  -moz-column-width: 100px;
  -webkit-column-width: 100px;
  column-width: 100px;
  height: 200px;
}