proper height adjustment in css grid cell

Question

That's my JSFiddle . I have a simple grid, that looks like this:

My goal is:

• for the text requiring more than 150px area:
  • extend row number 2 (the one with d ) height to 150px (to max)
  • add scroll bar to let user browse exceeding content
• for the text requiring less than 150px area:
  • keep row number 2 height equal to height necessary to present text

I was able to achieve that as above image presents. The problem I have is that for short text (or different screen resolution) the area stays with the height defined as max ( 150px ) and does not shrink. Thus for short text we have: Instead of desired this:

  .grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: minmax(auto, 150px); grid-template-areas: "addd"; } div { border: 1px solid black; } .grid-item-a { grid-area: a; } .grid-item-d { grid-area: d; } .long-text-box { height: 100%; overflow: auto; } } 

 <div class="grid-container"> <div class="grid-item-a"> side </div> <div class="grid-item-d"> <div class="long-text-box"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa nibh nec erat. </div> </div> 

What am I missing ?

Answer 1

Update corresponding properties in your code:

.grid-container {
  grid-template-rows: 1fr auto 1fr 1fr 1fr;
}

.grid-item-d {
  max-height: 150px;
  overflow: auto;
}

Full example: https://jsfiddle.net/zojv3Lt9/