How to make overflowing div to go to bottom when max-width is reached?

December 7, 2022

How to make overflowing div to go bottom, when width of parent div is filled. here tag 7 and 8 is overflowing. How to make it go bottom when there is no more space available? Thank you

.main{
  width: 300px;
  height: 150px;
  display:flex;
  border: 2px solid #000;
  padding: 10px;
}

.inner{
  border: 1px solid #5eba7d;
  margin-right:5px;
  padding: 5px;
  height: max-content;
  width: max-content;
  white-space:nowrap;
}

<div class="main">
 <div class="inner">tag 1</div>
 <div class="inner">tag 2</div>
 <div class="inner">tag 3</div>
 <div class="inner">tag 4</div>
 <div class="inner">tag 5</div>
 <div class="inner">tag 6</div>
 <div class="inner">tag 7</div>
 <div class="inner">tag 8</div>
</div>

>Solution :

Just add flex-wrap property to the parent element and it should do the trick.

.main{
  width: 300px;
  height: 150px;
  display:flex;
  border: 2px solid #000;
  padding: 10px;
  flex-wrap: wrap;
}

.inner{
  border: 1px solid #5eba7d;
  margin-right:5px;
  padding: 5px;
  height: max-content;
  width: max-content;
  white-space:nowrap;
}

<div class="main">
 <div class="inner">tag 1</div>
 <div class="inner">tag 2</div>
 <div class="inner">tag 3</div>
 <div class="inner">tag 4</div>
 <div class="inner">tag 5</div>
 <div class="inner">tag 6</div>
 <div class="inner">tag 7</div>
 <div class="inner">tag 8</div>
</div>