两个overflow-div应该共享100％的高度

Question

我有两个“overflow:auto”div并想要应用以下规则：

1. 如果两个div都包含长overflow (>50%)个内容，则每个div的最大高度应为50%。

2. 如果内容很少(<50% height, scrollbars invisible)，则另一个可以使用50%以上，总共100%。

3. 如果两者的内容都很少，那么如果较低的内容从高度的50%开始，则会很好。但这不是必须的。

这可能without JavaScript吗？我不需要旧的浏览器支持。

* {
  margin: 0;
  padding: 0;
}
body,
html {
  height: 100%;
}
#upper {
  width: 100%;
  height: 50%;
  overflow: auto;
}
#lower {
  width: 100%;
  height: 50%;
  overflow: auto;
}
.content {
  height: 5000px;
  background: #cccccc;
}
.short_content {
  height: 50px;
  background: #cccccc;
}

<div id="upper">
  <div class="short_content"></div>
</div>
<div id="lower">
  <div class="content"></div>
</div>