嗨，我有一個網格容器，希望網格容器只有這么高，所有的網格項目，以適應和調整相應的網格高度(500像素)。我的代碼如下所示:

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    padding: 10px;
    margin-top: 20px;
    height: 500px;
}


.grid-item{
    background-color: rgba(255, 255, 255, 0.8);
    overflow: auto;
    text-align: center;

}

<div class="grid-container">
  <div class="grid-item">
    <input type="text">
    <div id="counter">0<div>
    <img id="1" src="url">
  </div>
</div>

您可以對網格項目使用flex和flex-direction列。flex-grow將有助于指定內容可以拉伸的程度。在下面的例子中，我已經把伸縮增加到1來均勻拉伸。

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 10px;
  margin-top: 20px;
  height: 500px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  overflow: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
}

.image {
  background-image: url(url);
  flex-grow: 1;
  background-size: cover;
}

<div class="grid-container">
  <div class="grid-item">
    <input type="text">
    <div id="counter">0</div>
    <div id="1" class="image">
    </div>
  </div>

參考此鏈接

https://blog . fullstackdigital . com/how-to-create-a-無瑕響應-post-grid-with-flexbox-e 5c 7 cc 9d 28 e？gi=1479559b382

為了防止您的內容從容器中溢出，請使用 你的部門 溢出:隱藏 }或yourdiv{ overflow:scroll}