How to set maximum number of rows in a flexbox container and hide extra element?

Question

I'm using display: flex; flex-wrap: wrap. I'd like to limit the displayed number of items to 2 rows. Anything after the second row should not show. Is this possible?

Starter codepen: 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*/
}


  a
  a
  a
  a
  a
  a
  a
  a
  a
  a
  a
  a
  a
  a
  a
  a
  a

user_8620333 · Answer

Use CSS grid for this:

.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 */
}


  a
  a
  a
  a
  a
  a
  a
  a
  a
  a
  a
  a
  a
  a
  a
  a
  a

How to set maximum number of rows in a flexbox container and hide extra element?

1 Answers