If we have some buttons like

and when the number of buttons increases so that a max height is reached, how do we get them in multiple columns like this?

and if the display becomes to narrow to accomodate for the columns (any number of columns that sooner or later are too wide) allow a higher "max height" like

I tried this

columns: 3;
column-gap: 10px;

Which results in button being distributed evenly between columns.

(The number of columns is also locked to 3).

If I set height of the parent, columns gets higher and possibly fewer (but I dont want the parent to have unnecessary height).

CodePudding user response：

You just need to use flex with property flex-direction: column;

.container {
  display:inline-flex;
  flex-direction: column;
  flex-wrap: wrap;
  height:200px;
}
.item {
  background-color:black;
  height:30px;
  width:100px;
  margin-bottom:5px;
  margin-right:5px;
  color:#fff
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

To change the height when many items I think you need javaScript