Flex父元素滚动条长度短于子元素，内容遮挡问题求助

问题根源 #

你的代码中，最外层容器[parent]同时使用transform: translate(-50%, -50%)和子元素的align-self: center实现居中，再搭配overflow: auto，会导致flex容器的滚动范围计算偏差：当内容高度超过视口时，居中的子元素会部分超出容器的上下边界，但滚动条的高度仅基于容器的100vh设置，无法覆盖全部内容，最终出现滚动条长度不足、部分内容被遮挡的情况。

修复方案 #

推荐采用弹窗内部滚动的交互逻辑（更符合用户对弹窗的预期），同时调整居中方式避免布局冲突：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Popup with Scroll</title>
  <style>
    [parent] {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: rgba(0,0,0,0.1);
    }

    [parent] > [child] {
      flex: 0 1 auto;
      border: 2px solid green;
    }

    [child] > [content] {
      max-width: 720px;
      min-width: 400px;
      max-height: 90vh;
      overflow-y: auto;
      border: 2px solid blue;
    }

    [content] > header,
    [content] > main,
    [content] > footer {
      height: 200px;
      border: 2px solid red;
    }
  </style>
</head>
<body>
  <div parent>
    <div child>
      <div content>
        <header>header</header>
        <main>main</main>
        <footer>footer</footer>
      </div>
    </div>
  </div>
</body>
</html>

关键修改点 #

1. 替换居中方式：用flex的justify-content: center和align-items: center替代transform居中，让容器布局计算更准确，避免滚动区域偏差。
2. 限制弹窗高度：给[content]设置max-height: 90vh，确保弹窗不会超出视口范围，留足边距提升体验。
3. 内部滚动：给[content]开启overflow-y: auto，让内容超出时在弹窗内部滚动，而非全屏滚动。

如果确实需要全屏滚动（非弹窗常规场景），可以调整为以下代码，用margin: auto替代align-self: center避免布局冲突：

[parent] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  overflow: auto;
}

[parent] > [child] {
  flex: 1;
  margin: auto;
  display: flex;
  justify-content: center;
  border: 2px solid green;
}

[child] > [content] {
  max-width: 720px;
  min-width: 400px;
  flex: 1;
  border: 2px solid blue;
}

[content] > header,
[content] > main,
[content] > footer {
  height: 200px;
  border: 2px solid red;
}

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