html - CSS - 水平 Div 布局

Question

所以，如果我有这样一个鸟巢:

<div>
    <div></div>
    <div></div>
    <div></div>
    ...
</div>

是否可以使用纯 CSS 来制作动态水平布局？

基本上，这个屏幕只能容纳2个垂直内容

所以，这个屏幕可以容纳3个垂直内容

正文在固定底部显示水平滚动条。屏幕外可能有更多内容。 内容向左流动，但当垂直空间已满时将流入新列。额外内容如箭头所示流动。

两个屏幕不应该显示垂直滚动条。那么这可能吗？如何实现？我尝试使用display: flex，但它没有实现上面的顺序效果。 Javascript 将是我最后的选择。

请参阅 jsFiddle:http://jsfiddle.net/W7z4s/10/ (请注意，我想要 .outer div 填充主体和底部的滚动条)

请务必支持 Firefox 和 Chrome!

Answer 1

我认为这可以通过使用 :nth-child 来清除 float 和媒体查询来实现，例如 @media screen 和 (max-height: 700px) 来根据高度改变要清除的元素。