带overflow:hidden父级的容器中，如何不修改container实现position: sticky生效？

场景代码 #

CSS #

.overflow-hidden {
  overflow: hidden;
}

.overflow-x-auto {
  overflow-x: auto;
}

.container {
  max-height: 100px;
}

.sticky {
  position: sticky;
  top: 0;
}

HTML #

<div class="overflow-hidden">
  <div class="overflow-x-auto">
    <div class="container">
      <div class="sticky">Sticky</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
    </div>
  </div>
</div>

问题 #

能否在不向.container元素添加任何额外overflow属性的前提下，让position: sticky正常工作？.container是插件自动生成，无法移除。

解决方案 #

可以实现，核心是调整上层元素样式，让滚动容器成为.sticky的正确定位参照，同时不修改.container的overflow属性：

方法1：调整.overflow-x-auto为滚动容器，覆盖.container高度限制 #

修改CSS如下：

.overflow-hidden {
  overflow: hidden;
}

.overflow-x-auto {
  overflow-x: auto;
  /* 配置为垂直滚动容器 */
  max-height: 100px;
  overflow-y: auto;
}

.container {
  max-height: 100px;
  /* 覆盖插件生成的高度限制，让内容撑满父容器 */
  max-height: none !important;
}

.sticky {
  position: sticky;
  top: 0;
  /* 可选：添加背景色避免被下方内容遮挡 */
  background: white;
}

方法2：通过Flex布局适配.container原有高度限制 #

如果无法修改.container的max-height，可采用Flex布局调整：

.overflow-hidden {
  overflow: hidden;
}

.overflow-x-auto {
  overflow-x: auto;
  /* 设置Flex布局，让子元素自适应容器高度 */
  display: flex;
  flex-direction: column;
  max-height: 100px;
  overflow-y: auto;
}

.container {
  max-height: 100px;
  /* 让container在Flex容器内自动扩展高度 */
  flex: 1;
  min-height: 0;
}

.sticky {
  position: sticky;
  top: 0;
  background: white;
}

原理说明 #

position: sticky的生效依赖最近的可滚动祖先元素（即设置了非visible值overflow且存在滚动行为的元素）作为定位参照。当前场景中，.container的max-height导致内容溢出，但未配置垂直滚动，上层元素的overflow组合限制了.sticky的定位范围，导致失效。上述方法通过将.overflow-x-auto配置为垂直滚动容器，让.sticky能正确识别滚动参照，从而恢复粘性定位功能，且未向.container添加任何overflow属性。

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