Below is the code I have written:
body {
padding-top: 20px;
text-align: center;
background-color:black;
}
h1 {
display: inline-block;
background: white;
}
h1 {
font-size: 30px
}
p {
background: yellow;
}
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.content {
width: 20%;
background-color: red;
padding: 20px; margin:10px;
}<div class="container">
<div class="content">
<h1>Box 1</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
<div class="content">
<h1>Box 2</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
<div class="content">
<h1>Box 3</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
<div class="content">
<h1>Box 4</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</p>
</div>
<div class="content">
<h1>Box 5</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>
</div>I am facing two issues with my code:
The height of the boxes is uneven: Why do the box heights on the second row not match those of the first row? I expected the flex-wrap property to make all wrapped rows have equal heights based on the tallest box (i.e., Box 3). How can I modify the code to ensure that all boxes are the same size as the largest box, regardless of wrapping?
The text box heights are inconsistent: To enhance the visual appeal, I want the yellow background of the text to be consistent across all boxes. This means I would like to extend the yellow space below Box 1 and 2 so that the yellow boxes are as tall as Box 3. What changes should I make to achieve this?