div高度计算（100％-50px）不起作用

Question

https://codepen.io/joshuajazleung/pen/EbbgBN

<div class="outer">
  <div class="inner">
    <img src="https://placehold.it/300x200" alt="">
    <div>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!</div>
  </div>
</div>

.outer {
  background: red;
  position: relative;
  height: calc(100% - 60px);
}

.inner {
  position: relative;
  top: -100px;
}

因为.inner移到顶部一点，以减少.out的总体空间，所以我使用

height: calc(100% - 50px); // my logic is that it's div's height minus 50px

但这不起作用，想知道为什么吗？

Answer 1

.outer {
  background: red;
  position: relative;
  height: calc(100vh - 50px);
}

尝试更改100%=>100vh