How do I get flexbox to auto size?

Issue

I am trying to build a dynamic flexbox that will fill if there is a missing column.

What I currently have is row1 and row2 which are 70% and allow for the column. But when there's no column, it's just empty.

I would like row1 and row2 to stretch if there is no column present:

Code

section {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 100px;
}

.c {
  background: red;
  height: 100%;
  width: 30%;
}

.a, .b {
  background: green;
  height: 45px;
  width: 70%;
}

.a {
  background: lightblue
}

<section>
<div class="a">row1</div>
<div class="b">row2</div>
<div class="c">column</div>
</section>

<section>
<div class="a">row1</div>
<div class="b">row2</div>
</section>

Solution

If instead of width you use min-width, you don't constrain the columns when there's no sidebar:

section {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 100px;
}

.c {
  background: red;
  height: 100%;
  width: 30%;
}

.a, .b {
  background: green;
  height: 45px;
  min-width: 70%;
}

.a {
  background: lightblue
}

<section>
  <div class="a">row1</div>
  <div class="b">row2</div>
  <div class="c">column</div>
</section>

<section>
  <div class="a">row1</div>
  <div class="b">row2</div>
</section>

Answered By - Geat