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

Question

基本上我希望与浮动元素的正常行为相反。

而不是填充视口宽度，它应该是高度。而不是扩大高度 - 它应该扩大到右边的宽度。最重要的是我不知道会有多少项......

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

<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>

http://jsfiddle.net/Bananenbiegerei/e1dnagpv/16/

谢谢！