CSS grid right hand column never larger than left hand column

Question

I have a wrapper div which has dynamic height, but generally shouldn't exceed the window height.

Inside the wrapper there are two columns, each with variable height depending on what content is available.

The left hand column should always be shown without scrolling internally, if it's deeper than the window height then the wrapper should scroll.

The right hand column should scroll internally if it's deeper than the window height, and it shouldn't make the wrapper scroll.

Using CSS grid I can get this layout to work when the right hand column is deeper than the left by constraining the height of the right column, but when the left hand column exceeds the wrapper height and causes it to scroll I want the right hand column to match its height and I can't find a way to make this happen.

I've created a simplified example that demonstrates the layout.

.wrapper {
    display: grid;
    grid-column-gap: 16px;
    grid-template-columns: auto 33%;
}

.item:first-child {
  background-color: red;
}
.item:last-child {
  background-color: blue;
  overflow-y: auto;
}

.child {
  background-color: white;
  height: 50px;
  margin: 20px;
  width: calc(100% - 40px)
}

<html>
<body>
 <div class="wrapper">
    <div class="item">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
    </div> 
    <div class="item">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
    </div>
  </div>
</body>
</html>

Try css position properties. [jsfiddle demo](https://jsfiddle.net/xmr62v70/) | [possible duplicate](https://stackoverflow.com/q/34194042/3597276) — Michael Benjamin, May 01 '20 at 16:27

score 0 · Answer 1 · answered May 01 '20 at 15:17

If you want the right column to scroll you should specify it in the css. First give the column a class

<div class="item itemThatScrolls"> // give it a unique class in the html

And then in your css:

.itemThatScrolls {
   overflow: scroll;
   height: auto;
   max-height: 100vh;
}

This likely isn't exactly what you desire, since ideally you would be changing the max height to be equal to the height of the other column. To do this I would say you should incorporate some javascript magic, and just set the max-height of the second column dynamically as you determine the first columns height.

CSS grid right hand column never larger than left hand column

1 Answers1