在CSS网格单元中适当调整高度

Question

那是我的JSFiddle。我有一个简单的网格，看起来像这样：

我的目标是：

• 对于需要超过150px区域的文本：
  • 将第2行（具有d的行）的高度扩展到150px（最大）
  • 添加滚动条以使用户浏览超出内容的内容
• 对于需要少于150px区域的文本：
  • 保持第2行的高度等于显示文本所需的高度

我能够实现如上图所示的效果。我的问题是，对于短文本（或不同的屏幕分辨率），该区域保持为max（150px）的高度，并且不会缩小。因此，对于短文本，我们有： 而不是这样：

    .grid-container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-rows: minmax(auto, 150px);
      grid-template-areas:
        "a d d d";
    }
    
    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>

我想念什么？

Answer 1

更新代码中的相应属性：

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

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

完整示例：https://jsfiddle.net/zojv3Lt9/