Search code examples
htmlcsscss-grid

How can I make a two-column layout have equal height columns with one scrollable?

I want to display two areas in two columns using CSS Grid. However height of left column must be the same as height in right column.

If left column is higher than right column the content in left column should be scrollable.

What I want to achieve:

enter image description here

I cannot to this without hardcoding heights in pixels. Is is possible to do that by CSS only? Or I need to use JavaScript to recalculate left column height?

I attached jsFiddle to take a look.

https://jsfiddle.net/rafalcypcer/2teonuhy/17/

Thanks,

Rafal 

.gridwrapper {
  display: grid;
  grid-template-columns: 0.5fr 1.5fr;
  grid-auto-rows: 200px;
  grid-gap: 10px;
  grid-template-rows: auto;
}

.column {
  background: green;
}

.dynamic-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  background: pink;
  margin: 20px;
}

.list {
  overflow-y: auto;
  margin: 20px;
  height: 100%;
}

.item {
  height: 50px;
  background: yellow;
  border: 2px solid black;
}
<div class="gridwrapper">
      <div class="column">
        <div class="list">
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
        </div>
  </div>
  <div class="column">
    <div class="dynamic-content">Some dynamic content with random height</div>
  </div>
</div>

Solution

  • Since the width is known you can consider position:absolute for the content so it doesn't affect the height and simply stretch it using top:0;bottom:0;

    .gridwrapper {
  display: grid;
  grid-template-columns: 0.5fr 1.5fr;
  grid-auto-rows: 200px;
  grid-gap: 10px;
  grid-template-rows: auto;
}

.column {
  background: green;
  position:relative;
}

.dynamic-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  background: pink;
  margin: 20px;
}

.list {
  position:absolute;
  overflow-y: auto;
  margin: 20px;
  top:0;
  bottom:0;
  left:0;
  right:0;
}

.item {
  height: 50px;
  background: yellow;
  border: 2px solid black;
}
    <div class="gridwrapper">
      <div class="column">
        <div class="list">
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
        </div>
  </div>
  <div class="column">
    <div class="dynamic-content">Some dynamic content with random height</div>
  </div>
</div>