确保垂直内容水平溢出答案

【问题标题】：Ensure vertical content overflows horizontally确保垂直内容水平溢出
【发布时间】：2015-08-26 20:27:00
【问题描述】：

TL;DR：尝试水平溢出垂直块，类似于 Windows“地铁”界面。彩色块应保持垂直对齐，除非它们不适合，在这种情况下，它们应该溢出到新列中（块的布局会随着垂直尺寸的减小而水平增加）。

目前，我创建了一个显示以下内容的 HTML 页面：

在此标记中，存在以下元素：

<div class="container">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
</div>

我正在尝试定义 CSS 规则，以便在调整“容器”div 的大小时，彩色块水平溢出，如下面的屏幕截图所示：

这可以使用纯 CSS/SCSS 实现吗？我是否需要使用 JavaScript 或动态创建新元素？

我尝试使用以下 SASS 规则显示这样的布局，但无济于事：https://gist.github.com/psgs/cd87a1b3e70b35e264ec

非常感谢，
psgs

【问题讨论】：

【解决方案1】：

如果您的块向左浮动 (float:left)，那么当您增加 div 的宽度时，块应自动向右移动，或者如您所说，应水平溢出。

【讨论】：

您好 Rupesh，感谢您的回答。不幸的是，这并不是我想要实现的。如果可能，彩色块应保持垂直对齐，除非它们无法容纳，在这种情况下它们应溢出到新列中。正如@christopher-karlsson 所说，随着垂直尺寸的减小，块的布局会水平增加。