0

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>
Libra
  • 2,544
  • 1
  • 8
  • 24

1 Answers1

0

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>
dantheman
  • 3,189
  • 2
  • 10
  • 18
  • For some reason this works in the reproducible example I've made, but not in my actual use-case. Not sure why, the question has been closed as a duplicate regardless – Libra Jan 25 '23 at 20:25