CSS grid height to one child element while the other scrolls

Question

I have a CSS grid with two elements. I want the parent div height to be equal to the left child div height, and I want the right div content to scroll if it overflows. How can I achieve this without hardcoding the parent height? I may not know the left child div height in advance.

Right now, the parent expands to fit whichever child div is bigger.

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="styles.css" />
  </head>

  <body>
    <div class="app">
      <div class="left">Left</div>
      <div class="right">
        Right<br />
        Right<br />
        Right<br />
        Right<br />
        Right<br />
        Right<br />
        Right<br />
        Right<br />
        Right<br />
      </div>
    </div>
  </body>
</html>

.app {
  display: grid;
  grid-template-areas: "left right";
}

.left {
  grid-area: left;
  height: 50px;
}

.right {
  grid-area: right;
}

Code sandbox link: https://codesandbox.io/s/silly-burnell-fi89s

CSS grid height to one child element while the other scrolls

0 Answers0