Html 可滚动元素，具有灵活的顶部边缘和固定的左/右/底部（无js）

我有一个，下面是一个滚动条。文本元素在示例图像中通常是一行的左侧，但有时在示例图像的右侧有多行

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

在我的例子中，我通过添加position来伪造它：绝对；顶部：120px；对于左侧和顶部的滚动框：220px；用于右侧的滚动框。但我永远不知道会有多高

最后，它需要在IE8上运行：但如果能在更新的浏览器中找到一个解决老问题的方法，那么在新的浏览器中运行任何工作示例都会有所帮助

这是一本书

这里是我的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>

*
  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