Percentage height with flexbox

Question

I am trying to understand why a height of 80% and 90% seem to not be working. I want my text to be able to fit, but even when I make my container height 100% or calc(100vh - 150px), although it does increase, it's not to the value that I am expecting. Below is a picture of the problem.

* {
  margin: 0;
}
html,
body {
  height: 100%;
}
#bigwrap {
  position: relative;
  height: calc(100vh - 150px);
  width: 100%;
}
.container {
  display: flex;
  position: absolute;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  width: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
}
.container img {
  width: 200px;
  height: 200px;
}
.left {
  display: flex;
  flex-flow: column wrap;
  align-items: flex-start;
  justify-content: space-around;
  order: 1;
  background: red;
  flex-basis: 100%;
  height: 100%;
}
.left img {
  max-width: 100%;
}
.middle {
  display: flex;
  flex-flow: column wrap;
  align-content: flex-start;
  justify-content: space-around;
  order: 3;
  background: green;
  flex-basis: 100%;
  height: 100%;
}
.right {
  text-align: center;
  order: 2;
  background: yellow;
  flex-basis: 100%;
  height: 100%;
}
.box {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  justify-content: flex-start;
  height: 200px;
  width: 200px;
}
@media screen and (min-width: 600px) {
  .container {
    flex-wrap: nowrap;
  }
  .left {
    flex-basis: 1;
    order: 1;
  }
  .middle {
    flex-basis: 1;
    order: 2;
  }
  .right {
    flex-basis: 1;
    order: 3;
  }
}

<div id="bigwrap">
  <div class="container">
    <div class="left">
      <img src="cat1.jpeg" alt="cat">
      <img src="cat1.jpeg" alt="cat">
    </div>
    <div class="middle">
      <div class="box">
        <p>
          This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text.
          This is text. This is text. This is text. This is text. This is text. This is text.
        </p>
      </div>
      <div class="box">
        <p>
          This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text.
          This is text. This is text. This is text. This is text. This is text. This is text.
        </p>
        <p>
          This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text.
          This is text. This is text. This is text. This is text. This is text. This is text.
        </p>
      </div>
    </div>
    <div class="right">
      <p>texteiehiefief texteiehiefief texteiehiefief texteiehiefief</p>
      <p>texteiehiefief texteiehiefief texteiehiefief texteiehiefief</p>
      <p>texteiehiefief texteiehiefief texteiehiefief texteiehiefief</p>
    </div>
  </div>

score 1 · Accepted Answer · answered Jul 19 '16 at 05:07

* {
    margin: 0;
}

html,
body {
    height: 100%;
}

#bigwrap {
    position: relative;
    height: 100%;
}

.container {
 display: flex;
 position: absolute;
 flex-wrap: wrap;
 justify-content: center;
 align-items: flex-start;
 height: 100%;
 width: 80%;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%); /* http://stackoverflow.com/q/36817249/3597276 */
}

.container img {
    width: 200px;
    height: 200px;
}

.left {
    display: flex;
    flex-flow: column wrap;
    align-items: flex-start;
    justify-content: space-around;
    order: 1;
    background: red;
    flex-basis: 100%;
    height: 100%;
}

.left img {
    max-width: 100%;
}

.middle {
    display: flex;
    flex-flow: column wrap;
    order: 3;
    background: green;
    flex-basis: 100%;
    height: 100%;
}

.right {
    text-align: center;
    order: 2;
    background: yellow;
    flex-basis: 100%;
    height: 100%;
}

.box {
    /* height: 200px;          Remove. This limits the height of the paragraph */
    width: 200px;
}

.box > p {
    margin-bottom: 25px;       /* create separation between text boxes */
}

@media screen and (min-width: 600px) {
    .container {
        flex-wrap: nowrap;
    }
    .left {
        flex-basis: 1;
        order: 1;
    }
    .middle {
        flex-basis: 1;
        order: 2;
    }
    .right {
        flex-basis: 1;
        order: 3;
    }
}

<div id="bigwrap">
  <div class="container">
    <div class="left">
      <img src="cat1.jpeg" alt="cat">
      <img src="cat1.jpeg" alt="cat">
    </div>
    <div class="middle">
      <div class="box">
        <p>
          This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text.
          This is text. This is text. This is text. This is text. This is text. This is text.
        </p>
      </div>
      <div class="box">
        <p>
          This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text.
          This is text. This is text. This is text. This is text. This is text. This is text.
        </p>
        <p>
          This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text.
          This is text. This is text. This is text. This is text. This is text. This is text.
        </p>
      </div>
    </div>
    <div class="right">
      <p>texteiehiefief texteiehiefief texteiehiefief texteiehiefief</p>
      <p>texteiehiefief texteiehiefief texteiehiefief texteiehiefief</p>
      <p>texteiehiefief texteiehiefief texteiehiefief texteiehiefief</p>
    </div>
  </div>

Percentage height with flexbox

1 Answers1

jsFiddle