元素在多列布局中打破流動

Question

我在一個帶有視網膜顯示屏的設備上遇到了一個特定於Chrome的問題。 具體來說，我正在使用：

• MacBook Pro（Retina，13英寸，2012年末）
• OS X（10.10.2）
• Chrome（40.0.2214.111）（64位）

---

我在<ul>元素上創建了一個CSS多列布局，其中一個<li>包含一個<div> ，其中max-height: 50px和overflow: auto 。

如果沒有任何列，例如http://i.imgur.com/0OgsEug.png ， <div>似乎忽略了列並將其置於可能的位置，而不是按照您的預期行事。

示例： http ： //jsfiddle.net/pabwszej/2/ （調整結果窗口的大小，以便獲得3列布局）

Answer 1

干得好。

jsfiddle.net/pabwszej/3

ul, li {list-style-type: none; margin: 0; padding: 0; }

div { max-height: 50px; overflow: scroll; border: 1px solid green; }

.columns {  }

.columns > li { margin-bottom: 5px; border: 1px solid red; -webkit-column-width: 150px; width:150px; float:left; margin-left:5px; }