溢出：滾動仍然溢出

Question

問題是當我將頁面縮小到某個點時， <p>元素的頂部溢出，奇怪的是不是底部。 需要明確的是，我不想溢出。

這是一個 JSFiddle 鏈接： https://jsfiddle.net/maep468x/1

您會看到，當您運行它並將結果 window 縮小到大約 350 像素時， <p>元素開始溢出。

我嘗試從 .main-content 規則中刪除我的 line-height 和 font-size 屬性，但它仍然溢出。

---

我也會把代碼放在這里以防萬一

<main>
  <div id="header-container">
    <h1>My Life</h1>
  </div>
  <div class="main-container">
    <div class="main-content">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sagittis fermentum lectus vel consectetur. In hac habitasse platea dictumst. Aliquam suscipit vehicula hendrerit. Suspendisse a tristique nisi, eget hendrerit diam. Mauris cursus purus magna, a pharetra mi venenatis auctor. Etiam congue felis quis maximus ultrices. Duis quis libero libero. Proin et iaculis sapien. Quisque sodales augue urna, sed dapibus eros hendrerit ut. Cras ac leo odio. Sed quis ornare risus, ut pulvinar ipsum. Vestibulum interdum laoreet efficitur. Nulla facilisi. Suspendisse ullamcorper mi in risus congue vehicula. Aliquam erat volutpat. Etiam quis aliquet lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus purus ac tortor tempus iaculis. Integer ac tempus lorem. Donec euismod libero nibh. Suspendisse tincidunt nulla ligula, et blandit quam imperdiet at.
      </p>
    </div>
    <div class="img-container"><img src="../img/background-3062024.jpg" alt="starry night sky" /></div>
  </div>
  <div class="main-container" id="right-side">
    <div class="img-container"><img src="../img/bali-2975787.jpg" alt="Bali beach sunset" /></div>
    <div class="main-content">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sagittis fermentum lectus vel consectetur. In hac habitasse platea dictumst. Aliquam suscipit vehicula hendrerit. Suspendisse a tristique nisi, eget hendrerit diam. Mauris cursus purus magna, a pharetra mi venenatis auctor. Etiam congue felis quis maximus ultrices. Duis quis libero libero. Proin et iaculis sapien. Quisque sodales augue urna, sed dapibus eros hendrerit ut. Cras ac leo odio. Sed quis ornare risus, ut pulvinar ipsum. Vestibulum interdum laoreet efficitur. Nulla facilisi. Suspendisse ullamcorper mi in risus congue vehicula. Aliquam erat volutpat. Etiam quis aliquet lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus purus ac tortor tempus iaculis. Integer ac tempus lorem. Donec euismod libero nibh. Suspendisse tincidunt nulla ligula, et blandit quam imperdiet at.
      </p>
    </div>
  </div>
  <div class="main-container">
    <div class="main-content">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sagittis fermentum lectus vel consectetur. In hac habitasse platea dictumst. Aliquam suscipit vehicula hendrerit. Suspendisse a tristique nisi, eget hendrerit diam. Mauris cursus purus magna, a pharetra mi venenatis auctor. Etiam congue felis quis maximus ultrices. Duis quis libero libero. Proin et iaculis sapien. Quisque sodales augue urna, sed dapibus eros hendrerit ut. Cras ac leo odio. Sed quis ornare risus, ut pulvinar ipsum. Vestibulum interdum laoreet efficitur. Nulla facilisi. Suspendisse ullamcorper mi in risus congue vehicula. Aliquam erat volutpat. Etiam quis aliquet lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus purus ac tortor tempus iaculis. Integer ac tempus lorem. Donec euismod libero nibh. Suspendisse tincidunt nulla ligula, et blandit quam imperdiet at.
      </p>
    </div>
    <div class="img-container"><img src="../img/bali-1514132_1920.jpg" alt="bali ricefield" /></div>
  </div>
</main>

main {
  background-color: rgba(0, 128, 0, 0.5);
}

#header-container {
  display: flex;
  width: 100%;
  height: 200px;
  justify-content: center;
  align-items: center;
  font-size: calc(5px + 2vw);
  border-bottom: 2px solid #000;
  background-image: url("../img/panoramic-3358822_1920.jpg");
  background-size: cover;
  text-shadow: 0.5px 0.25px 2px #d49522;
}

.main-container {
  display: flex;
  height: fit-content();
}

.main-content {
  display: flex;
  height: 400px;
  font-family: Georgia;
  font-size: calc(10px + 0.5vw);
  line-height: 24px;
  overflow-y: scroll;
  padding: 10px;
  background-color: rgba(0, 128, 0, 0.25);
}

.img-container {
  min-width: 600px;
}

.img-container img {
  max-width: 100%;
  height: auto;
}

@media only screen and (max-width: 930px) {
  .main-container {
    flex-wrap: wrap;
  }

  .main-content {
    align-items: center;
  }
}

Answer 1

從align-items: center; align-items: flex-start; 並設置height: auto用於移動屏幕。

 main { background-color: rgba(0, 128, 0, 0.5); } #header-container { display: flex; width: 100%; height: 200px; justify-content: center; align-items: center; font-size: calc(5px + 2vw); border-bottom: 2px solid #000; background-image: url("../img/panoramic-3358822_1920.jpg"); background-size: cover; text-shadow: 0.5px 0.25px 2px #d49522; }.main-container { display: flex; height: fit-content(); }.main-content { display: flex; height: 400px; font-family: Georgia; font-size: calc(10px + 0.5vw); line-height: 24px; overflow-y: scroll; padding: 10px; background-color: rgba(0, 128, 0, 0.25); }.img-container { min-width: 600px; }.img-container img { max-width: 100%; height: auto; } @media only screen and (max-width: 930px) {.main-container { flex-wrap: wrap; }.main-content { align-items: flex-start; height: auto; } }

 <main> <div id="header-container"> <h1>My Life</h1> </div> <div class="main-container"> <div class="main-content"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sagittis fermentum lectus vel consectetur. In hac habitasse platea dictumst. Aliquam suscipit vehicula hendrerit. Suspendisse a tristique nisi, eget hendrerit diam. Mauris cursus purus magna, a pharetra mi venenatis auctor. Etiam congue felis quis maximus ultrices. Duis quis libero libero. Proin et iaculis sapien. Quisque sodales augue urna, sed dapibus eros hendrerit ut. Cras ac leo odio. Sed quis ornare risus, ut pulvinar ipsum. Vestibulum interdum laoreet efficitur. Nulla facilisi. Suspendisse ullamcorper mi in risus congue vehicula. Aliquam erat volutpat. Etiam quis aliquet lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus purus ac tortor tempus iaculis. Integer ac tempus lorem. Donec euismod libero nibh. Suspendisse tincidunt nulla ligula, et blandit quam imperdiet at. </p> </div> <div class="img-container"><img src="../img/background-3062024.jpg" alt="starry night sky" /></div> </div> <div class="main-container" id="right-side"> <div class="img-container"><img src="../img/bali-2975787.jpg" alt="Bali beach sunset" /></div> <div class="main-content"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sagittis fermentum lectus vel consectetur. In hac habitasse platea dictumst. Aliquam suscipit vehicula hendrerit. Suspendisse a tristique nisi, eget hendrerit diam. Mauris cursus purus magna, a pharetra mi venenatis auctor. Etiam congue felis quis maximus ultrices. Duis quis libero libero. Proin et iaculis sapien. Quisque sodales augue urna, sed dapibus eros hendrerit ut. Cras ac leo odio. Sed quis ornare risus, ut pulvinar ipsum. Vestibulum interdum laoreet efficitur. Nulla facilisi. Suspendisse ullamcorper mi in risus congue vehicula. Aliquam erat volutpat. Etiam quis aliquet lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus purus ac tortor tempus iaculis. Integer ac tempus lorem. Donec euismod libero nibh. Suspendisse tincidunt nulla ligula, et blandit quam imperdiet at. </p> </div> </div> <div class="main-container"> <div class="main-content"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sagittis fermentum lectus vel consectetur. In hac habitasse platea dictumst. Aliquam suscipit vehicula hendrerit. Suspendisse a tristique nisi, eget hendrerit diam. Mauris cursus purus magna, a pharetra mi venenatis auctor. Etiam congue felis quis maximus ultrices. Duis quis libero libero. Proin et iaculis sapien. Quisque sodales augue urna, sed dapibus eros hendrerit ut. Cras ac leo odio. Sed quis ornare risus, ut pulvinar ipsum. Vestibulum interdum laoreet efficitur. Nulla facilisi. Suspendisse ullamcorper mi in risus congue vehicula. Aliquam erat volutpat. Etiam quis aliquet lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus purus ac tortor tempus iaculis. Integer ac tempus lorem. Donec euismod libero nibh. Suspendisse tincidunt nulla ligula, et blandit quam imperdiet at. </p> </div> <div class="img-container"><img src="../img/bali-1514132_1920.jpg" alt="bali ricefield" /></div> </div> </main>