Search code examples
htmlcsswebkitblink

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

I need a table whose height is determined by the content of the first column, and the content of the second column scrolls:

table

This is what I have so far:

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>

This works fine in Chrome 59 and Safari. But it doesn't work in Chrome 62 (Canary) and Firefox.

How can this layout be accomplished in a way that works in Chrome (both Stable and Canary), Safari, Firefox, using only HTML and CSS, and without resorting to flexbox?

Thanks

Solution

  • How about this: absolutely positioned right container does not stretch the parent div and the scroll bar works as expected. The left container being a normal div sets the height for the whole element. By the way, no need for additional right_content as the scroll bar applied directly works just fine. Hope this helps!

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