CODEWITHSUNDEEP
htmlcssresponsive-design
rydwolf
rydwolf

Reputation: 1528

CSS columns that automatically relocate overflowing content

In a ul element, is it possible to have list items automatically move to the right when overflowing? For example, say that there is an unordered list with a height of 300px. The total height (border + padding + margin included) of a list element is 60px. If there are, say, 4 list elements, they are listed top to bottom. But is it possible to make extra list elements start on a new column? For example, if there were six, put one on a new column to the right? I have tried researching this, and found nothing. Maybe it has to do with display?

Upvotes: 0

Views: 102

Answers (1)

Johannes
Johannes

Reputation: 67814

You could define the ul as a flex container with the settings shown below

ul {
  max-height: 300px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

li {
  box-sizing: border-box;
  flex-grow: 0;
  height: 60px;
  border: 1px solid #ddd;
}
<ul>
  <li>bla bla</li>
  <li>bla bla</li>
  <li>bla bla</li>
  <li>bla bla</li>
  <li>bla bla</li>
  <li>bla bla</li>
</ul>

Upvotes: 3

Related Questions