Search code examples
cssflexboxcss-grid

CSS Grid: force column max height to adjoining colum (even if shorter)

been trying to figure this out in css grid...

I want the height of columb B to max out at the height of column A. If column B's is lomnger (almost always will be) then this can be viewied by scrolling behaviour.

Is this achievable in anyway? I have tied methods related to min-content but to no avail.

Here's some markup: https://codepen.io/richerimage/pen/LYrJzdo/1639cd21af0aeae3d8c50dca75f5f52a

And a diagram may explain things better then me(!)

diagram

Solution

  • You could use contain: size on the second colum and then fix the overflow

    .wrapper {
  background-color: #f5f5f5;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 2rem;
  
}

.column-a {
  outline: dotted 1px red;
}

.column-b {
  outline: dotted 1px green;
  display: grid;
  grid-gap: 1rem;
  overflow: auto;
  contain: size;
}

.card {
  display: block;
  background: #ddd;
  height: 8rem;
}


.column-a,
.column-b,
.card {
  padding: 1rem;
}

.clip-point {
  border-bottom: dashed 2px red;
}
    <div class="wrapper">
  <div class="column-a">
    <code>.column-a</code>
    <h1>Donec ullamcorper nulla non metus auctor fringilla.</h1>
    <p>Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p class="clip-point">Clip the height of Column B here (let the rest of the content be scrollable (<code>overflow-y: scroll;</code>)</p>
  </div>
  
  <div class="column-b">
    <code>.column-b</code>
    <div class="card"><code>.card</code></div>
    <div class="card"><code>.card</code></div>
    <div class="card"><code>.card</code></div>
    <div class="card"><code>.card</code></div>
  </div>
  
  
</div>