嗨，我有一個網(wǎng)格容器，希望網(wǎng)格容器只有這么高，所有的網(wǎng)格項目，以適應(yīng)和調(diào)整相應(yīng)的網(wǎng)格高度(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>

您可以對網(wǎng)格項目使用flex和flex-direction列。flex-grow將有助于指定內(nèi)容可以拉伸的程度。在下面的例子中，我已經(jīng)把伸縮增加到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-無瑕響應(yīng)-post-grid-with-flexbox-e 5c 7 cc 9d 28 e？gi=1479559b382

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