如何防止div中的元素溢出？

Question

I am trying to make these red squares when they reach the end of div , start new column from above and continue downward and so on .... BUT HERE WHEN THEY REACH THE END OF DIV tHE OVERFLOW I know this sound silly but I am doing iit for a school project and thanks ..

 .umbrella { width: 500px; height: 500px; background: grey; } .square { background: red; width: 100px; height: 50px; margin: 5px; } 

 <div class="umbrella"> <div class="square"> Hello1</div> <div class="square"> Hello1</div> <div class="square"> Hello1</div> <div class="square"> Hello1</div> <div class="square"> Hello1</div> <div class="square"> Hello1</div> <div class="square"> Hello1</div> <div class="square"> Hello1</div> <div class="square"> Hello1</div> <div class="square"> Hello1</div> <div class="square"> Hello1</div> <div class="square"> Hello1</div> <div class="square"> Hello1</div> <div class="square"> Hello1</div> <div class="square"> Hello1</div> </div> 

Answer 1

display: flex is your friend, with the settings shown below...

 .umbrella { width: 500px; height: 500px; background: grey; display: flex; flex-direction: column; flex-wrap: wrap; } .square { background: red; width: 100px; height: 50px; margin: 5px; } .square.x { width: 150px; background: green; } 

 <div class="umbrella"> <div class="square"> Hello1</div> <div class="square"> Hello1</div> <div class="square"> Hello1</div> <div class="square x"> Hello1</div> <div class="square"> Hello1</div> <div class="square"> Hello1</div> <div class="square"> Hello1</div> <div class="square"> Hello1</div> <div class="square"> Hello1</div> <div class="square"> Hello1</div> <div class="square"> Hello1</div> <div class="square"> Hello1</div> <div class="square"> Hello1</div> <div class="square x"> Hello1</div> <div class="square"> Hello1</div> </div> 

Here's another solution using CSS colums. column-count determines the number of columns, depending on that number they will be equally wide.

 .umbrella { width: 500px; height: 500px; background: grey; column-count: 2; } .square { background: red; width: 100px; height: 50px; margin: 5px; } .square.x { width: 150px; background: green; } 

 <div class="umbrella"> <div class="square"> Hello1</div> <div class="square"> Hello1</div> <div class="square"> Hello1</div> <div class="square x"> Hello1</div> <div class="square"> Hello1</div> <div class="square"> Hello1</div> <div class="square"> Hello1</div> <div class="square"> Hello1</div> <div class="square"> Hello1</div> <div class="square"> Hello1</div> <div class="square"> Hello1</div> <div class="square"> Hello1</div> <div class="square"> Hello1</div> <div class="square"> Hello1</div> <div class="square"> Hello1</div> </div> 

Answer 2

You can do this with flex:

 .umbrella { width: 500px; height: 400px; background: grey; display:flex; flex-wrap:wrap; flex-direction:column; } .square { background: red; width: 100px; height: 50px; margin: 5px; } 

 <div class="umbrella"> <div class="square"> Hello1</div> <div class="square"> Hello1</div> <div class="square"> Hello1</div> <div class="square"> Hello1</div> <div class="square"> Hello1</div> <div class="square"> Hello1</div> <div class="square"> Hello1</div> <div class="square"> Hello1</div> <div class="square"> Hello1</div> <div class="square"> Hello1</div> <div class="square"> Hello1</div> <div class="square"> Hello1</div> <div class="square"> Hello1</div> <div class="square"> Hello1</div> <div class="square"> Hello1</div> </div>