溢出和css3列

Question

我无法使css3列布局与定义高度容器区域中的滚动一起使用。以下是一个示例链接：

http://codepen.io/anon/pen/WQNeVX

我在css中所做的就是将其定义到容器区域 -

#container {
  width: 500px;
  height: 200px;
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-column-count: 4; 
  -moz-column-count: 4;
  column-count: 4;
}

在这种情况下，我应该做什么来使溢出工作作为滚动？ 谢谢。

Answer 1

您需要将高度设置为max-height

body {
 margin: 0;
 padding: 0;
}
#container {
  width: 500px;
  max-height: 200px; /* like this*/
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-column-count: 4; 
  -moz-column-count: 4;
  column-count: 4;
}

第二种方法就是这样做，对于Moz，Opera，IE-9和Chrome就是这样的：

更新了CSS

body {
  margin: 0;
  padding: 0;
}
#container-wrapper{ 
  width: 500px;
  max-height: 200px;  
  overflow-y: scroll!important;
  overflow-x: hidden;
}
#container {
  -webkit-column-count: 4; 
  -moz-column-count: 4;
  column-count: 4;
}

更新了HTML

<div id="container-wrapper">
   <div id="container">

   </div>
</div>

如果您仍然遇到任何问题，请回来。