as you can see, the height of div7 and div8 is shorter than others, how to copy or make sure all of them has same height.
Flexbox is copying the tallest div, but when the item move in bottom due to responsiveness it cannot inherit the value of height anymore.
<!DOCTYPE html><html><head><style>.flex-container { display: flex; flex-wrap: wrap; background-color: DodgerBlue;}.flex-container > div { background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;}</style></head><body><h1>Flexible Boxes</h1><div class="flex-container"><div> 1<br>1<br>1<br>1<br>1<br>1</div><div>2</div><div>3</div> <div>4</div><div>5</div><div>6</div> <div>7</div><div>8</div></div></body></html>