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 >
<div >tag 1</div>
<div >tag 2</div>
<div >tag 3</div>
<div >tag 4</div>
<div >tag 5</div>
<div >tag 6</div>
<div >tag 7</div>
<div >tag 8</div>
</div>
CodePudding user response:
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 >
<div >tag 1</div>
<div >tag 2</div>
<div >tag 3</div>
<div >tag 4</div>
<div >tag 5</div>
<div >tag 6</div>
<div >tag 7</div>
<div >tag 8</div>
</div>