title: div height calc(100% - 50px) not working
body: <p><a href="https://codepen.io/joshuajazleung/pen/EbbgBN" rel="nofollow noreferrer">https://codepen.io/joshuajazleung/pen/EbbgBN</a></p>
  
  <pre><code>&lt;div class="outer"&gt;
    &lt;div class="inner"&gt;
      &lt;img src="https://placehold.it/300x200" alt=""&gt;
      &lt;div&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio animi harum impedit ex esse labore, placeat, tempore sapiente nisi cupiditate fugiat soluta ullam dicta ducimus accusamus tenetur consequuntur nesciunt earum!&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  .outer {
    background: red;
    position: relative;
    height: calc(100% - 60px);
  }
  
  .inner {
    position: relative;
    top: -100px;
  }
  </code></pre>
  
  <p>since .inner is moved to top a little bit, to reduce .outer overall space, I use </p>
  
  <pre><code>height: calc(100% - 50px); // my logic is that it's div's height minus 50px
  </code></pre>
  
  <p>But it's not working, wondering why?</p>