可变高度的CSS表格由第一列和第二列滚动

Question

我需要一个表，其高度由第一列的内容决定，第二列的内容滚动：

这是我到目前为止所做的：

https://jsfiddle.net/gabrielmaldi/kmah7w13/

＆＃13;

＆＃13;

.container {
  display: table;
  width: 100%;
}

.left {
  display: table-cell;
  
  background-color: green;
}

.right {
  display: table-cell;
  height: 100%;
  
  background-color: lightblue;
}

.right_content {
  height: 100%;
  overflow-y: auto;
}

＆＃13;

<div class="container">
  <div class="left">
    Left content<br>Left content<br>Left content<br>Left content<br>Left content
  </div>
  <div class="right">
    <div class="right_content">
      Right content<br>Right content<br>Right content<br>Right content<br>Right content<br>Right content<br>Right content<br>Right content<br>Right content<br>Right content
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

这在Chrome 59和Safari中运行良好。但它在Chrome 62（Canary）和Firefox中无效。

如何在Chrome（包括Stable和Canary），Safari，Firefox，仅使用HTML和CSS，以及不使用Flexbox的情况下实现此布局？

由于

Answer 1

这个怎么样：绝对定位的右侧容器不会拉伸父div，滚动条按预期工作。左侧容器是普通div，用于设置整个元素的高度。顺便说一句，不需要额外的right_content，因为直接应用的滚动条工作得很好。希望这有帮助！

.container {
  display: block;
  width: 100%;
  overflow:hidden;
  position:relative;
}

.left {
  width: 50%;
  background-color: green;
}

.right {
  position:absolute;
  left:50%;
  top:0;
  width:50%;
  overflow: auto;
  height:100%;
  background-color: lightblue;
}

<div class="container">
  <div class="left">
    Left content<br>Left content<br>Left content<br>Left content<br>Left content
  </div>
  <div class="right">
      Right content<br>Right content<br>Right content<br>Right content<br>Right content<br>Right content<br>Right content<br>Right content<br>Right content<br>Right content
  </div>
</div>