Home Why is my flexbox adding a gap between the first two children and the third?

Questions

Why is my flexbox adding a gap between the first two children and the third?

January 25, 2023

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>