Javascript 使用浮动元素填充窗口高度并水平缩放

基本上，我希望通过浮动元素实现与正常行为相反的效果

它不应填充视口宽度，而应填充高度。而不是扩大高度-它应该扩大宽度的权利。最上面我不知道会有多少物品

下面是一个示例宽度一个固定的容器宽度，它可以完成这项工作，但前提是我知道有多少项，并使用媒体查询视口高度

<stlye>
#horizontal-container {
 background: rgb(123,123,123);
 width: 1500px;
 height: 100vh;
}

ul.item-list {
 list-style: none;
 margin: 0;
 padding: 0;
}
ul.item-list li.item {
 float: left;
 margin: 10px;
}
</style>
<div id="horizontal-container">
 <ul class="item-list clearfix">
      <li class="item">
          <img src="http://placehold.it/200x150">
      </li>
      <li class="item">
          <img src="http://placehold.it/150x150">
      </li>
      <li class="item">
          <img src="http://placehold.it/50x150">
      </li>
  </ul>
</div>

---

谢谢

我想这就是你想要的：我不知道你是否能用它。它使用显示：flex。谢谢，Halcyon。很接近。问题在于这些列。如果列表中有图像，则它们不会浮动，而是固定在这些列上。下面是一个示例：。这里是一个虚拟的，它应该是什么样子的：这个例子的问题是：一个固定的容器宽度，围绕元素列表。所以我需要知道有多少元素…有什么建议吗？