Advertisements
I want the third child, the one with 100% width, to appear directly below the first two, instead, it’s wrapping around to the bottom of the child container.
Why is this happening? How can I make it behave as I want?
I know that I can reduce the height of the parent container to have it appear as I want, but I don’t understand why it will not wrap as expected even with the container set to the height it is
note: You will likely need to view the example in full-screen to see what I mean
.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>>Solution :
If you want all the elements to stay at the top, use align-content: flex-start;
.parent{
height: 80vh;
width: 100%;
border: 1px solid red;
align-content: flex-start;
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>