问题是当我将页面收缩到某个点时，

元素的顶部溢出，奇怪的是底部没有溢出。说清楚一点，我不想让这两个都溢出来。

这里有一个指向它的JSFiddle链接:https://jsfidle.net/maep468x/1

您将看到，当您运行它并将结果窗口缩小到大约350px时，

元素开始溢出。

我已经尝试从.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;
  }
}