1

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

gabrielmaldi
  • 2,157
  • 2
  • 23
  • 39

1 Answers1

1

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>
Natalia
  • 336
  • 3
  • 3
  • This doesn't exactly fit my scenario because I needed that the first column filled the remaining width left by the second column, and my second column's width isn't known, so it must stretch to fit its content. However, I wasn't specific enough in my question, and your answer does resolve the proposed problem. Moreover, I was inspired by your use of `position: absolute` and was able to find a solution to my problem. So I'm marking this as an answer. Thanks! – gabrielmaldi Sep 13 '17 at 20:59