如何通过css的方法获取高度不确定的元素高度

Question

例如有这样的一个容器

<div class="outer">
    <div class="head"></div>
    <div class="content"></div>
</div>

outer 的高度是屏幕的高度
head 的高度是不确定的
如何通过纯css使得 content 的高度是 outer 减 head 后的呢？
通过css预处理器的方式也行

Answer 1

  .outer{
    display: flex;
    flex-direction: column;
  }
  
  .outer .content{
    flex: 1;
  }

Answer 2

calc(100% - headheight)??