css - 如何在 flexbox 容器中设置最大行数并隐藏额外元素？

Question

我正在使用 display: flex; flex-wrap: wrap .我想将显示的元素数限制为 2 行。第二行之后的任何内容都不应显示。这可能吗？
入门密码笔:https://codepen.io/exclipy/pen/qBaZEdV

.container {
  display: flex;
  flex-wrap: wrap;
  width: 50%;
  max-width: 800px;
  margin: 0 auto;
  outline: 1px dashed blue;
  padding: 5px;
}

div.item {
  border: 1px solid black;
  width: 100px;
  /* height is determined by font size but is constant for all items*/
}

<div class="container">
  <div class="item">a</div>
  <div class="item">a</div>
  <div class="item">a</div>
  <div class="item">a</div>
  <div class="item">a</div>
  <div class="item">a</div>
  <div class="item">a</div>
  <div class="item">a</div>
  <div class="item">a</div>
  <div class="item">a</div>
  <div class="item">a</div>
  <div class="item">a</div>
  <div class="item">a</div>
  <div class="item">a</div>
  <div class="item">a</div>
  <div class="item">a</div>
  <div class="item">a</div>
</div>

Answer 1

为此使用 CSS 网格:

.container {
  display: grid;
  grid-template-columns:repeat(auto-fit,100px); /* the width is define here */
  grid-template-rows:auto auto; /* 2 rows */
  grid-auto-rows:0px; /* next rows equal to 0 */
  overflow:hidden; /* hide the overflow */
  width: 50%;
  max-width: 800px;
  margin: 0 auto;
  outline: 1px dashed blue;
  padding: 5px;
}

div.item {
  box-shadow: 0 0 0 1px inset black; /* use a shadow instead of border to not increase the height */
}

<div class="container">
  <div class="item">a</div>
  <div class="item">a</div>
  <div class="item">a</div>
  <div class="item">a</div>
  <div class="item">a</div>
  <div class="item">a</div>
  <div class="item">a</div>
  <div class="item">a</div>
  <div class="item">a</div>
  <div class="item">a</div>
  <div class="item">a</div>
  <div class="item">a</div>
  <div class="item">a</div>
  <div class="item">a</div>
  <div class="item">a</div>
  <div class="item">a</div>
  <div class="item">a</div>
</div>