溢出：滚动仍然溢出

Question

The problem is when I shrink the page to a certain point, the top of the <p> elements overflow, weirdly not the bottom. To be clear, I want neither to overflow.

Here's a JSFiddle link to it: https://jsfiddle.net/maep468x/1

You will see that when you run it and shrink the result window to about 350px, the <p> elements start overflowing.

I've tried removing my line-height and font-size properties from the.main-content rule, but it still overflows.

---

I'll put the code here aswell just in case

<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

Change property align-items from align-items: center; to align-items: flex-start; and set height: auto for mobile screens.

 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>