csslayoutflexboxstretch

How to vertically stretch only one row in a multi-line flexbox wrapped layout?

This one had a similar question but he wanted a fixed row, and no one could provide an answer using purely flexbox.

I have a simple layout with 3 divs, I want the first and second to be on the first row, then the 3 to be on the second row taking 100vw; I want the third div (the one on the bottom) to the as little height as possible (only the height for the text inside) and so, divs 1 and 2 would strech to fill up the space. The problem is that when I try that, there is an empty space between the rows that I can't fill up unless I stretch div 3.

In my attempts, the outer container is flex: row wrap, div 3 is align-self: flex-end and I tried to apply align-self: stretch to divs 1 and 2 but then just wouldn't stretch. How can I accomplish this?

Here is what I have.

HTML:

<html>
  <body>
    <div class="container">
      <div class="first">First</div>
      <div class="second">Second</div>
      <div class="third">Third</div>
    </div>
  </body>
</html>

CSS

* {
  font-size: 1.5rem;
  margin: 0;
  padding: 0;
}

.container {
  background: #AAA;
  height: 100vh;
  display: flex;
  flex-flow: row wrap;
  align-content: stretch;
}

.first {
  background: lightblue;
  width: 30%;
}

.second {
  background: lightyellow;
  width: 70%;
}

.third {
  background: lightgreen;
  width: 100vw;
  align-self: flex-end;
}

Here is my code snippet. The gray area is the one I want filled up by blue and yellow.

enter image description here

Solution

  • Have you considered adding one more div for the first two elements?

    * {
  font-size: 1.5rem;
  margin: 0;
  padding: 0;
}

.container {
  background: #AAA;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-content: stretch;
}

.container1 {
  display: flex;
  flex: 1 0;
}

.first {
  background: lightblue;
  width: 30%;
}

.second {
  background: lightyellow;
  width: 70%;
}

.third {
  background: lightgreen;
}
    <body>
  <div class="container">
    <div class="container1">
      <div class="first">First</div>
      <div class="second">Second</div>
    </div>
    <div class="third">Third</div>
  </div>
</body>