Flexbox height percentages [duplicate]

Question

I have a basic flexbox layout that I am trying to apply height percentages to, currently they all occupy the same percentage…

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
}

.row_one {
  background: blue;
  height: 30%;
}

.row_two {
  background: wheat;
  height: 30%;
}

.row_three {
  background: yellow;
  height: 40%;
}

.fill-height-or-more {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.fill-height-or-more > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

<section class="some-area fill-height-or-more">
  <div class="row_one">
    Row 1
  </div>
  <div class="row_two">
    Row 2
  </div>
  <div class="row_three">
    Row 3
  </div>
</section>

Is this even possible with flexbox? If so, does anybody have an example they can point me in the direction of?

Answer 1

Use flex property instead of percentages.

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
}

.row_one {
  background: blue;
  flex: 3
}

.row_two {
  background: wheat;
  flex: 3;
}

.row_three {
  background: yellow;
  flex: 4;
}

.fill-height-or-more {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.fill-height-or-more > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

<section class="some-area fill-height-or-more">
  <div class="row_one">
    Row 1
  </div>
  <div class="row_two">
    Row 2
  </div>
  <div class="row_three">
    Row 3
  </div>
</section>