仅显示适合的项目数量，然后展开以紧密贴合

我有一个容器，我想水平地容纳多个孩子，但我知道我的孩子数量比通常容纳的要多。

+-----------------------+
|                       |
|                       |
+-----------------------+

+----+ +----+ +----+ +----+ +----+ +----+ 
|    | |    | |    | |    | |    | |    | 
|    | |    | |    | |    | |    | |    | 
+----+ +----+ +----+ +----+ +----+ +----+ 

只使用CSS，我如何只显示适合的项目，并将它们展开以紧密贴合？

期望的结果：

+-----+-----+-----+-----+
|     |     |     |     |
|     |     |     |     |
+-----+-----+-----+-----+

@NathanArthur 的解决方案非常适合您有固定高度的情况，但是如果您不知道自己的身高，事情就会变得更加棘手。

要在没有固定高度的情况下执行此操作，您可以使用display: grid。浏览器支持 CSS 网格 http://caniuse.com/css-grid/目前仅限于最新版本，但我相信这将是在没有固定高度的情况下为数不多的（如果不是唯一的）方法之一。

但你可以做的是设置一个display: grid with auto-fit列使用repeat()函数结合minmax()功能。这将为您提供具有您设置的最小尺寸的列，这将填充所需的其余空间。将此与grid-auto-rows: 0px这将隐藏子自动放置添加的任何其他行，如果它们开始超出定义的范围，则会发生这种情况grid-template参数。看起来有点像这样，注意没有定义的高度和可变的宽度：

ul {
  border: 1px solid red;
  width: 350px;
  overflow: hidden;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-template-rows: 1fr;
  grid-auto-columns: 0px;
  grid-auto-rows: 0px;
}

ul.test2{
  width: 520px;
}

ul > li  {
  border: 1px solid blue;
  box-sizing: border-box;
}
  

<ul>
  <li>Item 1</li>
  <li>Item 2<br><br><br> with some extra height</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
</ul>
<ul class="test2">
  <li>Item 1</li>
  <li>Item 2<br><br><br> with some extra height</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
</ul>