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

Question

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:

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>

Not *natively* with CSS-Grid but there is a method - https://stackoverflow.com/questions/34194042/one-flex-item-sets-the-height-limit-for-siblings — Paulie_D, Mar 27 '19 at 15:19
Why was this marked as duplicate? The answer here pretty much solves the issue correctly without relying on the solutions in the linked answer — IvanS95, Mar 27 '19 at 15:41

score 6 · Accepted Answer · answered Mar 27 '19 at 15:19

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>

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

1 Answers1