首先咱们来拆解你遇到的问题根源：

• 居中方式的局限性：你用 margin-top:50vh + transform: translate(-50%, -50%) 实现居中，但当视口高度小于Modal总高度时，这种方式会让Modal顶部超出视口范围——因为 50vh 是基于视口高度的一半，完全没考虑Modal自身的高度。
• overflow不生效的原因：你设置了 max-height:100% 但没给 #content-container 添加 overflow-y:auto，而且父元素（html/body）默认没有设置高度，导致 height:50% 和 max-height:100% 的参考基准根本不明确。

下面是修正后的完整代码方案：

修正后的CSS #

/* 先确保html和body占满视口高度，给子元素的百分比高度提供基准 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* center content */
#content-container {
  width: 50%;
  /* 改用max-height限制最大高度为视口的90%，留一点边距避免贴边 */
  max-height: 90vh;
  border: 3px solid red;
  /* 保留transform居中，但改用fixed定位更稳定 */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 添加垂直滚动，当内容超过容器高度时自动生效 */
  overflow-y: auto;
  /* 确保容器内的padding不会撑大宽度 */
  box-sizing: border-box;
  padding: 10px;
}

/* wrapp content */
#wrapper {
  width: 100%;
  /* 去掉固定height，让内容自然撑开高度 */
  margin: 0;
  display: inline-flex;
  justify-content: center;
  align-items: flex-start; /* 改为flex-start避免内部内容被强制压缩 */
}

#img-desc-container {
  display: flex;
  flex-direction: column;
}

/* MULTI ELEMENT */
.image-area, .description-area {
  width: 200px;
  height: 125px;
  border: 1px solid black;
}

.image-area, .description-area, #list-area {
  box-sizing: border-box;
  margin: 10px;
}

/* LIST AREA */
#list-area {
  width: 200px;
  height: 250px;
  border: 1px solid black;
  background-color: #22AED1;
}

/* IMG AREA */
.image-area {
  background-color: #016FB9;
}

.image-area img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 避免图片拉伸变形 */
}

/* DESC AREA */
.description-area {
  background-color: #AFA98D;
  height: 105px;
}

/*FLEX CONTAINER */
#flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}

关键修改点说明： #

1. 设置html/body高度：确保#content-container的百分比高度有正确的参考基准，不会因为父元素高度不确定而失效。
2. Modal高度与滚动优化：用max-height:90vh限制Modal最大高度为视口的90%，同时添加overflow-y:auto，当内容超出容器高度时自动显示滚动条，彻底解决顶部溢出无法查看的问题。
3. 居中方式稳定性提升：保留transform的居中逻辑，但改用position:fixed定位，确保Modal始终相对于视口居中，不受页面滚动影响。
4. 内部布局调整：把#wrapper的align-items: content改为align-items: flex-start，避免内部的列表、图片区域被强制压缩变形。

这样修改后，不管浏览器窗口怎么调整，Modal都会自适应视口大小，高度不足时会显示滚动条，再也不会出现顶部内容溢出视口的情况。

内容的提问来源于stack exchange，提问作者EricTalv