title: Div container height percentage not working
body: <p>I know that this is a recurring question but I already looked around and I understand how it's supposed to work, or so I think. Currently I have <code>height:100%</code> for body and <code>min-height: 100%</code> for html. If I'm correct, percentage height should work for the #bigwrap that I have whose immediate parent is body. Following that, I have another div called <code>.container</code> in <code>#bigwrap</code>, however, whenever I increase the height for .container via percentage the height doesn't increase at all. I would like to be able to increase the height freely. This snippet doesn't cover the actual height. I actually have a navigation which comes before the <code>#bigwrap</code>. Another question I have is how does 100% height work if you put it on a div after the navigation, because wouldn't the navigation itself count as part of the body's '100%' height? Also the problem is occurring on both mobile and desktop. That is for mobile it's always the remaining height of the screen, I can't shrink it down to 60% height, for example. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
      margin: 0;
  }
  
  body {
      height: 100%;
      background-color: green;
  }
  
  html {
      min-height: 100%;
  }
  
  #bigwrap {
      position: relative;
      height: 70%;;
  }
  
  .container {
      display: flex; //
      position: absolute;
      flex-wrap: wrap;
      justify-content: center;
      align-items: flex-start;
      height: 100%;
      width: 70%;
      margin: auto; //
      top: 40%; //
      left: 50%; //
      transform: translate(-50%, -50%);
      background-color: white;
  }
  
  .left, .middle, .right {
      border-right: 1px solid blue;
  }
  
  .left {
      display: flex;
      flex-flow: column wrap;
      align-items: center;
      justify-content: space-around;
      order: 1; //
      background: red;
      flex: 1 20%;
      height: 100%;
  }
  
  .left img {
      max-width: 100%;
  }
  
  .middle {
      display: flex;
      flex-flow: column wrap;
      order: 2; //
      background: green;
      flex: 2 20%;
      height: 100%;
  }
  
  .right {
      text-align: center;
      order: 3; //
      background: yellow;
      flex: 1 20%;
      height: 100%;
  }
  
  .right .headbox {
      border-bottom: 1px solid orange;
      margin: auto;
      width: 60%;
      height: auto;
  }
  
  .right .list {
      text-align: center;
      margin: auto;
      width: 60%;
      height: auto;
  }
  
  .list ul {
      list-style: none;
      padding: 0;
  }
  
  .list a {
      text-decoration: none;
      color: inherit;
  }
  
  .headbox h3 {
      color: orange;
  }
  
  @media all and (max-width: 500px) {
      .container {
          flex-flow: row wrap;
          height: 100%;
      }
      .left img {
          height: 80px;
          width: 80px;
      }
      .left, .right, .middle {
          flex: 1 100%;
      }
      div.logo {
          margin: 0 auto;
          width: 30%;
          height: auto;
          text-align: center;
      }
      * {
          margin: 0;
      }
      #bigwrap {
          position: relative;
          height: 100%;
      }
      .container {
          display: flex; //
          position: absolute;
          position: relative;
          flex-wrap: wrap;
          justify-content: center;
          align-items: flex-start;
          height: 60%;
          width: 70%;
          margin: auto;
          background-color: white;
      }
      .left, .middle, .right {
          border-right: 1px solid blue;
      }
      .left {
          display: flex;
          flex-flow: column wrap;
          align-items: center;
          justify-content: space-around;
          order: 1; //
          background: red;
          flex: 1 20%;
          height: 100%;
      }
      .left img {
          max-width: 100%;
      }
      .middle {
          display: flex;
          flex-flow: column wrap;
          order: 2; //
          background: green;
          flex: 2 20%;
          height: 100%;
      }
      .right {
          text-align: center;
          order: 3;
          flex: 1 20%;
          height: 100%;
      }
      .right .headbox {
          border-bottom: 1px solid orange;
          margin: auto;
          width: 60%;
          height: auto;
      }
      .right .list {
          text-align: center;
          margin: auto;
          width: 60%;
          height: auto;
      }
      .list ul {
          list-style: none;
          padding: 0;
      }
      .list a {
          text-decoration: none;
          color: inherit;
      }
      .headbox h3 {
          color: orange;
      }
      @media all and (max-width: 500px) {
          .box img {
              max-width: 100%;
              margin-bottom: 9%;
          }
          .container {
              flex-flow: row wrap;
              height: 100%;
          }
          .left img {
              height: 80px;
              width: 80px;
          }
          .left, .right, .middle {
              flex: 1 100%;
          }
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="bigwrap"&gt;
  
      &lt;div class="container"&gt;
          &lt;div class="left"&gt;
              &lt;img src="cat1.jpeg" alt="Picture of kid" /&gt;
              &lt;img src="cat1.jpeg" alt="Picture of kid" /&gt;
          &lt;/div&gt;
          &lt;div class="middle"&gt;
              &lt;div class="box"&gt;
                  &lt;p&gt;Sample text. Sample text. Sample text. Sample
                      text. Sample text. Sample text. Sample text.
                      Sample text. Sample text. Sample text. Sample
                      text. Sample text. Sample text. Sample text.
                      Sample text. Sample text. Sample text. Sample
                      text.&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="box"&gt;
                  &lt;p&gt;Sample text. Sample text. Sample text. Sample
                      text. Sample text. Sample text. Sample text.
                      Sample text. Sample text. Sample text. Sample
                      text. Sample text. Sample text. Sample text.
                      Sample text. Sample text. Sample text. Sample
                      text.&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="box"&gt;
                  &lt;p&gt;Sample text. Sample text. Sample text. Sample
                      text. Sample text. Sample text. Sample text.
                      Sample text. Sample text. Sample text. Sample
                      text. Sample text. Sample text. Sample text.
                      Sample text. Sample text. Sample text. Sample
                      text.&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="right"&gt;
              &lt;div class="headbox"&gt;
                  &lt;h3&gt;Visit Us&lt;/h3&gt;
              &lt;/div&gt;
              &lt;div class="list"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Hours&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Plan&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Directions&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>