如何通过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;
  height: 100vh;
}

.head {
  flex-shrink: 0;
}

.inner {
  flex: auto;
}