使用align-items:center时内容被截断且内部sticky失效如何解决

安全阿岳

2026-9-29

问题根源

你遇到的两个问题都是flex布局和sticky属性的经典特性导致的：

内容截断：flex容器设置align-items: center后，当子元素高度超过容器本身高度时，子元素会从容器上下两端均等溢出，顶部溢出的内容无法通过滚动访问，属于flex布局的默认行为。
sticky失效：position: sticky的生效依赖正确的滚动上下文，你给#inner设置了overflow: auto，同时外层#outer也设置了overflow: auto，导致sticky元素的滚动锚点混乱，无法正常触发吸顶效果。

解决方案

不需要更换布局方式，只要调整少量CSS属性即可同时满足内容少的时候居中、内容多的时候不截断、sticky正常生效三个需求，修改点如下：

移除#outer的align-items: center属性，改为给#inner添加margin-block: auto实现垂直居中，该方案不会出现内容超出截断的问题
移除#inner的height: 100vh和overflow: auto属性，改为添加max-height: 100vh，滚动逻辑统一交给外层#outer，消除sticky的上下文干扰

修改后完整CSS代码

#outer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--white);
  overflow: auto;
  display: flex;
  justify-content: center;
}

#inner {
  width: 50%;
  max-height: 100vh;
  min-height: 500px;
  padding: 8px 16px 0;
  position: relative;
  display: flex;
  flex-flow: column;
  align-items: center;
  margin-block: auto;
}

#btn {
  cursor: pointer;
  position: sticky;
  font-size: 22px;
  font-weight: 900;
  top: 0;
  right: 0;
  padding: 5px 9px;
  margin: 0 0 0px auto;
}