Flexbox滚动至页面底部时向上偏移问题求助

核心问题 #

你的左侧元素position: sticky未按预期工作，导致滚动到底部时上移，根源是flex容器的高度配置与滚动上下文冲突：

• .container设置了min-height: 100vh，当页面内容超过视口高度时，容器会被内容撑开至实际内容高度，此时sticky元素的滚动上下文变为这个容器，而非浏览器视口。
• 由于容器未设置滚动属性，滚动行为由body触发，sticky元素无法关联到视口的滚动位置，因此会随容器内容整体上移。

修复步骤 #

1. 重置滚动上下文
   移除.container的min-height: 100vh，给body添加min-height: 100vh; margin: 0，让视口作为基础高度，滚动行为始终绑定到浏览器视口。
2. 确保sticky元素的父容器无溢出限制
   检查.container及所有父元素，移除overflow: hidden类的设置，保证sticky元素能正确感知视口滚动状态。
3. 优化flex布局的间距控制
   保留.container的display: flex; justify-content: center; align-items: flex-start，用gap: 2rem设置子元素间距（替代子元素的margin），同时给容器添加padding-top: 2rem控制顶部间距，避免干扰sticky定位。

关键代码修改 #

body {
  min-height: 100vh;
  margin: 0; /* 清除默认边距 */
}

.container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  /* 移除 min-height: 100vh */
  padding-top: 2rem;
  gap: 2rem;
}

.left {
  position: sticky;
  top: 2rem; /* 与容器padding-top匹配，保持元素与视口顶部的间距 */
  width: 200px;
}

.right {
  width: 600px;
}

调整后，左侧sticky元素会稳定绑定到视口滚动位置，滚动到底部时不再偏移，flex容器的居中对齐逻辑也能正常工作。

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