[FIXED] How to vertically align elements with horizontal overflow

Issue

I want to be able to create a div with a set size (in this example 100x100).

Then i want to be able to add x number of elements inside the div, in this example we can say 10 buttons with the size of 10x10 and align them vertically.

This means all buttons should be in a single column.

Then if i resize and make the new size 80x80 i should have 2 columns, the first with the first 8 buttons and then a new columns with the last 2 buttons.

I have tried with

flex-wrap: wrap;
display: flex;
flex-direction: column;
align-content: flex-start;

It aligns vertically but then when i resize the buttons keeps going over the bottom.

How can i align all elements so they are aligned vertically but if the height are not enought it should overflow into a new column. So no set number of columns since it could be x number of columns depending on the size.

Is this possible using css?

Solution

I think it only works when you give the container a maximum height. Is this what you need?

.container {
  flex-wrap: wrap;
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  max-height: 100px;
}

.button {
  width: 100px;
  height: 10px;
  border: solid thin black;
}

<div class="container">
  <div class="button"></div>
  <div class="button"></div>
  <div class="button"></div>
  <div class="button"></div>
  <div class="button"></div>
  <div class="button"></div>
  <div class="button"></div>
  <div class="button"></div>
  <div class="button"></div>
  <div class="button"></div>
</div>

Answered By - Gerard

Answer Checked By - Mildred Charles (PHPFixing Admin)