可滚动元素，具有灵活的上边缘和固定的左/右/下（无js）

Question

我有一个<p>，位于可滚动的<div>下面。文本元素通常是单行（示例图像中的左侧），但有时它有多行（示例图像中的右侧）。

我想要的是，我的可滚动元素的上边缘定位在<p>的高度，而下边缘是固定的。

在我的示例中，我通过为左侧的滚动框添加position: absolute;和top: 120px;以及为右侧的滚动框添加top: 220px;来伪造它。但我永远不知道<p>会有多高。

最后它需要在IE8上运行:(但它有助于在较新的浏览器中找到解决这个古老蹩脚的东西的任何工作示例。

这是CodePen for it。

这是我的HTML：

<div class="outer">
  <div class="inner-1">
    <p>Lorem ipsum dolor conseteoamet.</p>
    <div class="scroll">
      Lorem<br>ipsum<br>dolor<br>sit <br>amet<br>, consetetur<br> sadipscing<br> elitr,<br> sed <br>diam <br>nonumy <br>e <br>sit <br>amet, <br>consetetur s<br>adipscing <br>elitr, <br>sed <br>diam n<br>onumy e <br>sit <br>amet, <br>consetetur <br>sadipscing <br>elitr, <br>sed diam nonumy <br>esit amet, <br>consetetur sadipscing elitr, <br>sed diam<br> nonumy <br>eirmod <br>tempoamet.<br>Lorem ipsum <br>dolor sit <br>amet, <br>consetetur <br>sadipscing el
    </div>
  </div>
  <div class="inner-2">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy e sit amet, consetetur sadipscing elitr, sed diam nonumy e sit amet, consetetur sadipscing elitr, sed diam nonumy e sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempoamet.</p>
    <div class="scroll">
      Lorem<br>ipsum<br>dolor<br>sit <br>amet<br>, consetetur<br> sadipscing<br> elitr,<br> sed <br>diam <br>nonumy <br>e <br>sit <br>amet, <br>consetetur s<br>adipscing <br>elitr, <br>sed <br>diam n<br>onumy e <br>sit <br>amet, <br>consetetur <br>sadipscing <br>elitr, <br>sed diam nonumy <br>esit amet, <br>consetetur sadipscing elitr, <br>sed diam<br> nonumy <br>eirmod <br>tempoamet.<br>Lorem ipsum <br>dolor sit <br>amet, <br>consetetur <br>sadipscing el
    </div>
  </div>
</div>

我的CSS：

*
  box-sizing: border-box

.outer
  width: 800px
  height: 500px
  position: relative
  border: 1px solid #999

.inner-1, .inner-2
  background: #ddd
  padding: 2em
  margin: 2em
  position: absolute
  overflow: scroll
  top: 0
  width: 45%
  bottom: 0

.inner-1
  left: 0
.inner-2
  right: 0

.scroll
  border: 2px solid #aaa
  background: #eee
  overflow: scroll
  position: absolute
  left: 0
  right: 0
  bottom: 0

.inner-1 .scroll
  top: 110px
.inner-2 .scroll
  top: 220px