如何使 CSS 网格保持设置大小而不考虑条目？

Question

我有一个 CSS 网格，随着时间的推移使用 JSP 慢慢填满条目。网格本身有背景颜色，条目在网格内有自己的颜色。问题是随着条目的添加，网格的大小会增加。我希望网格背景保持固定大小，并在添加条目时在其中弹出条目（我在服务器端设置了最大条目限制，所以不用担心）。

这可能吗？我在下面收录了一些图片：

未添加杂项条目：

添加了 3 个杂项条目：

与上面的图片不同 ^^ 我希望我的仪表板网格始终固定为特定大小，并且只是让这些条目显示在内部以加班填充。

HTML

    <div class="chore-container">
        <c:forEach var="chore" items="${data}">
            <div class="chore">${chore.name}, ${chore.points} Points</div>
        </c:forEach>
    </div>

CSS

.chore-container {
  display: grid;
  grid-column-gap: 50px;
  grid-template-rows: auto auto auto;
  background-color: #ebebeb;
  padding: 10px;
  margin: 0 250px 0 250px;
  border-radius: 3px;
}

.chore {
  background-color: #c2c0c0;
  border: 1px solid #c2c0c0;
  padding: 20px;
  font-family: Outfit, sans-serif;
  font-weight: 500;
  font-size: 20px;
  text-align: left;
  margin: 5px 0 5px 0;
  border-radius: 8px;
}

Answer 1

将 max-height 和 overflow-y 属性添加到您的 .chore-container。

max-height: 200px 会成功，因此您的容器将保持在固定高度。

overflow-y: scroll 将允许滚动条出现在 y 轴上以滚动容器的内容。

.chore-container {
  display: grid;
  grid-column-gap: 50px;
  grid-template-rows: auto auto auto;
  background-color: #ebebeb;
  padding: 10px;
  margin: 0 250px 0 250px;
  border-radius: 3px;
  
  max-height: 200px;
  overflow-y: scroll;
}

.chore {
  background-color: #c2c0c0;
  border: 1px solid #c2c0c0;
  padding: 20px;
  font-family: Outfit, sans-serif;
  font-weight: 500;
  font-size: 20px;
  text-align: left;
  margin: 5px 0 5px 0;
  border-radius: 8px;
}

<div class="chore-container">
            <div class="chore">${chore.name}, ${chore.points} Points</div>
            <div class="chore">${chore.name}, ${chore.points} Points</div>
            <div class="chore">${chore.name}, ${chore.points} Points</div>
            <div class="chore">${chore.name}, ${chore.points} Points</div>
            <div class="chore">${chore.name}, ${chore.points} Points</div>
            <div class="chore">${chore.name}, ${chore.points} Points</div>
            <div class="chore">${chore.name}, ${chore.points} Points</div>
            <div class="chore">${chore.name}, ${chore.points} Points</div>
            <div class="chore">${chore.name}, ${chore.points} Points</div>
 </div>

Answer 2

这是一个潜在的解决方案...主要是 flexbox 和一些绝对位置，否则你最终会得到双滚动条。

    body {
      font-family: sans-serif;
    }

    .container {
      display: flex;
      flex-direction: column;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;

    }

    .top {

      color: #fff;
      background: #40B6C0;
      display: flex;
      flex-grow: 1;
      flex-direction: column;
      padding: 25px;
   
    }

    .scroll-region {
      width: 100%;
      display: flex;
      background: white;
      flex-grow: 1;
      overflow-y: scroll;
      flex-direction: column;

    }

    .chore {
      background-color: #c2c0c0;
      border: 1px solid #c2c0c0;
      padding: 20px;
      font-family: Outfit, sans-serif;
      font-weight: 500;
      font-size: 20px;
      text-align: left;
      margin: 5px 0 5px 0;
      border-radius: 8px;
    }

    .add-chore {
      text-decoration: none;
      background: #cc0000;
      color: white;
      font-size: 13px;
      border-radius: 4px;
      padding: 3px 6px;
      justify-content: flex-end;
      align-content: flex-end;
      align-self: flex-end;
    

    }

    .chore-container {

      display: grid;
      grid-column-gap: 50px;
      grid-template-rows: auto auto auto;
      background-color: #ebebeb;
      padding: 10px;
      /* margin: 0 250px 0 250px; */
      margin: 0 auto;
      border-radius: 3px;
      width: 80%;

    }

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />




</head>

<body>

  <div class="container">
  <div class="top">
   <a href="" class="add-chore">ADD CHORE</a>
  </div>

    <div class="scroll-region">

      <div class="chore-container">

        <div class="chore">SWEEP, 10 Points</div>
        <div class="chore">SWEEP, 10 Points</div>
        <div class="chore">SWEEP, 10 Points</div>
        <div class="chore">SWEEP, 10 Points</div>
        <div class="chore">SWEEP, 10 Points</div>
        <div class="chore">SWEEP, 10 Points</div>
        <div class="chore">SWEEP, 10 Points</div>
        <div class="chore">SWEEP, 10 Points</div>
        <div class="chore">SWEEP, 10 Points</div>
        <div class="chore">SWEEP, 10 Points</div>
        <div class="chore">SWEEP, 10 Points</div>
        <div class="chore">SWEEP, 10 Points</div>
        <div class="chore">SWEEP, 10 Points</div>
        <div class="chore">SWEEP, 10 Points</div>
        <div class="chore">SWEEP, 10 Points</div>
        <div class="chore">SWEEP, 10 Points</div>
        <div class="chore">SWEEP, 10 Points</div>
        <div class="chore">SWEEP, 10 Points</div>
        <div class="chore">SWEEP, 10 Points</div>
        <div class="chore">SWEEP, 10 Points</div>
        <div class="chore">SWEEP, 10 Points</div>
        <div class="chore">SWEEP, 10 Points</div>
        <div class="chore">SWEEP, 10 Points</div>
        <div class="chore">SWEEP, 10 Points</div>
        <div class="chore">SWEEP, 10 Points</div>
        <div class="chore">SWEEP, 10 Points</div>
        <div class="chore">SWEEP, 10 Points</div>
        <div class="chore">SWEEP, 10 Points</div>
        <div class="chore">SWEEP, 10 Points</div>
        <div class="chore">SWEEP, 10 Points</div>
        <div class="chore">SWEEP, 10 Points</div>
    
      </div>

    </div>
  </div>

</body>


</html>

如何使 CSS 网格保持设置大小而不考虑条目？

How to make CSS Grid stay set size regardless of entries?

html

css

jsp

grid