页面上方溢出元素无法滚动查看的问题求助

调整页面尺寸时，元素在视口上方溢出后，无法向上滚动查看这些内容。试过相关解决方案但无效。当前布局包含两个核心不可见div，以及一个包裹所有内容的container div（原本为解决该问题设置），相关代码如下：

原CSS代码 #

.container {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 500;
}

.main-content {
   display: flex;
   width: 100%;
   height: 100%;
   overflow: auto;
   margin: auto;
}

.window {
   /*height: 16vw;
   width: 27vw;*/
   display: flex;
   height: 550px;
   width: 800px;
   position: absolute;
   top: 50%;
   left: 50%;
   border: solid blue 5px;
   background-color: black;
   margin: auto;
   overflow: hidden;
}

原HTML代码 #

<div class="container">
  <div class="main-content">
    <div class="window" id="window1" style="transform: translate(-10%, -90%);">
      <div class="header" id="window-header">
        <img src="https://picsum.photos/800/550">
        <p class="title">navigation</p>
      </div>
    </div>
  </div>
</div>

你的问题核心是绝对定位+transform破坏了flex容器的滚动上下文：.window用position: absolute脱离了.main-content的flex布局流，导致容器无法正确计算子元素的实际位置和尺寸，overflow: auto自然无法生成能覆盖视口上方溢出部分的滚动区域。

修复方案一（推荐：用flex布局替代绝对定位） #

移除绝对定位和transform，改用flex自身的对齐属性控制元素位置，让滚动容器能正确识别子元素空间：

.container {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 500;
}

.main-content {
   display: flex;
   width: 100%;
   height: 100%;
   overflow: auto;
   align-items: flex-start; /* 关键：禁止子元素拉伸，保留自身高度 */
   justify-content: center; /* 水平居中 */
}

.window {
   display: flex;
   height: 550px;
   width: 800px;
   border: solid blue 5px;
   background-color: black;
   margin-top: 20px; /* 按需调整垂直位置，替代transform */
}

<div class="container">
  <div class="main-content">
    <div class="window" id="window1">
      <div class="header" id="window-header">
        <img src="https://picsum.photos/800/550">
        <p class="title">navigation</p>
      </div>
    </div>
  </div>
</div>

修复方案二（保留transform的兼容方案） #

如果必须用transform调整位置，需让滚动容器能识别子元素的偏移范围：

.container {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 500;
}

.main-content {
   display: flex;
   width: 100%;
   height: 100%;
   overflow: auto;
   min-height: max-content; /* 强制容器高度覆盖子元素的实际位置 */
   justify-content: center;
}

.window {
   display: flex;
   height: 550px;
   width: 800px;
   position: relative; /* 改用relative，避免脱离文档流 */
   border: solid blue 5px;
   background-color: black;
   transform: translate(-10%, -90%);
}

两种方案都能让.main-content正确计算滚动区域，解决视口上方溢出内容无法滚动查看的问题。

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