如何强制CSS网格为特定高度

Question

我找到了这个问题：How to set max height to a CSS grid，它讨论了为网格元素设置特定高度。我想设置网格本身的高度，并且有任何元素溢出来有一个滚动条（参见下图）。

即使我为容器元素设置了max-height，大文本（.top）仍会溢出并使容器元素的高度大于其max-height。由于我不知道.bottom元素的大小（其高度为auto），因此我无法将max-height设置为.top元件。

＆＃13;

＆＃13;

.container {
  padding: 5px;
  width: 200px;
  max-height: 200px;
  grid-template: 1fr auto / 1fr;
  grid-template-areas: "top" "bottom";
  background: red;
}

.top {
  background: blue;
  grid-area: top;
}

.bottom {
  background: green;
  grid-area: bottom;
}

＆＃13;

<div class="container">
  <div class="top">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin scelerisque blandit ipsum vitae vehicula. Vestibulum id urna ac odio scelerisque venenatis. Mauris blandit vitae tortor ac auctor. Donec pharetra accumsan eleifend. Fusce porta ante at turpis venenatis, sed luctus mi efficitur. Nunc eget metus pellentesque ante lacinia facilisis. Aenean magna nisi, feugiat at ullamcorper a, tincidunt id augue. Curabitur ut nisl eu risus convallis luctus et vitae enim. Ut vitae purus sed enim tempus convallis. Vestibulum consequat scelerisque ornare.</p>
    <p>Sed at urna turpis. Aenean vehicula, nunc elementum vehicula rutrum, sem orci ornare mauris, auctor ultricies quam enim quis sem. Praesent accumsan volutpat mollis. Proin tempus rhoncus lacus. Cras gravida, mauris sed suscipit vulputate, odio elit sagittis urna, non suscipit odio sapien eget ex. Ut vulputate ante sit amet diam tempus, eget tempus dolor sodales. Etiam quis orci posuere, interdum diam quis, tincidunt urna. Vivamus lectus lectus, hendrerit in sapien quis, tempor sollicitudin sem. Proin quis sem lectus. Fusce quis molestie enim, quis dapibus lacus. Nulla fringilla metus a odio lacinia feugiat. Vivamus rutrum diam placerat tristique scelerisque. Integer a iaculis justo, a tempus lorem.</p>
  </div>
  <div class="bottom">
    <p>Little Text</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

那么如何才能实现特定高度的网格并且任何太大的元素都有滚动条？

Answer 1

您忘记在容器上设置display：grid，并在顶部设置overflow：auto：

.container {
  padding: 5px;
  width: 200px;
  max-height: 200px;
  grid-template: 1fr auto / 1fr;
  grid-template-areas: "top" "bottom";
  background: red;
  display: grid; /* added */
}

.top {
  background: blue;
  grid-area: top;
  overflow: auto; /* added */
}

.bottom {
  background: green;
  grid-area: bottom;
}

<div class="container">
  <div class="top">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin scelerisque blandit ipsum vitae vehicula. Vestibulum id urna ac odio scelerisque venenatis. Mauris blandit vitae tortor ac auctor. Donec pharetra accumsan eleifend. Fusce porta ante at turpis venenatis, sed luctus mi efficitur. Nunc eget metus pellentesque ante lacinia facilisis. Aenean magna nisi, feugiat at ullamcorper a, tincidunt id augue. Curabitur ut nisl eu risus convallis luctus et vitae enim. Ut vitae purus sed enim tempus convallis. Vestibulum consequat scelerisque ornare.</p>
    <p>Sed at urna turpis. Aenean vehicula, nunc elementum vehicula rutrum, sem orci ornare mauris, auctor ultricies quam enim quis sem. Praesent accumsan volutpat mollis. Proin tempus rhoncus lacus. Cras gravida, mauris sed suscipit vulputate, odio elit sagittis urna, non suscipit odio sapien eget ex. Ut vulputate ante sit amet diam tempus, eget tempus dolor sodales. Etiam quis orci posuere, interdum diam quis, tincidunt urna. Vivamus lectus lectus, hendrerit in sapien quis, tempor sollicitudin sem. Proin quis sem lectus. Fusce quis molestie enim, quis dapibus lacus. Nulla fringilla metus a odio lacinia feugiat. Vivamus rutrum diam placerat tristique scelerisque. Integer a iaculis justo, a tempus lorem.</p>
  </div>
  <div class="bottom">
    <p>Little Text</p>
  </div>
</div>