I am facing an issue with the layout of my third child element. Instead of appearing below the first two children, it is wrapping around to the bottom of the container. Can anyone explain why this is happening and suggest a solution?
Even though I have set the parent container's height appropriately, the third child is not behaving as expected. I understand that reducing the height might work, but I want to know why it's not wrapping properly even with the current height.
Please note: To better understand the problem, it is recommended to view the example in fullscreen mode.
.parent{
height: 80vh;
width: 100%;
border: 1px solid red;
display: flex;
flex-wrap: wrap;
grid-gap: 10px;
}
.parent > *{
background-color: lightblue;
}
.child1{
height: 100px;
width: 100px;
}
.child2{
width: 100%;
}<div class="parent">
<div class="child1">some text</div>
<div class="child1">some text</div>
<div class="child2">
<div>more text</div>
<div>more text</div>
<div>more text</div>
<div>more text</div>
<div>more text</div>
<div>more text</div>
<div>more text</div>
</div>
</div>