CSS table 可变高度由第一列和第二列滚动决定

Question

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

这是我目前拥有的：

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

.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;
}

<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>

这在 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>

CSS table 可变高度由第一列和第二列滚动决定

CSS table with variable height determined by first column and second column scrolls

html

css

webkit

blink