固定宽度可滚动容器内Sticky元素提前偏移的CSS解决方案咨询

问题场景 #

有一个固定宽度的横向可滚动容器，内部嵌套flex布局的子容器，第一个子元素设置position: sticky; left: 0;，期望滚动时它始终固定在容器左侧。但实际滚动到一半时，该sticky元素会提前移出视野。

问题原因 #

内部.containing容器设置了width: 100%，导致其宽度被限制为父容器.scrollable的可视宽度（示例中为200px）。而sticky元素的包含块是这个.containing容器，当滚动时，sticky元素只能在.containing容器的宽度范围内保持粘性，一旦滚动到容器边缘就会跟随移动，无法覆盖整个滚动区域。

解决方案 #

无需显式指定宽度，通过以下CSS调整让内部容器自动适配子元素总宽度，同时保证sticky效果正常：

方法1：替换width:100%为min-width:100% #

移除.containing的width:100%，改为min-width:100%。这样既保证子元素总宽度小于父容器时，内部容器撑满父容器；又能在子元素总宽度超过父容器时，自动扩展容器宽度，让sticky元素的包含块覆盖整个滚动区域。

修改后的完整代码：

.scrollable {
  position: relative;
  max-width: 200px;
  overflow-x: auto;
}

.containing {
  display: flex;
  min-width: 100%; /* 替换原width:100% */
}

.sticky {
 position: sticky;
 left: 0;
 background: #fff; /* 可选：添加背景避免被遮挡 */
}

.other {
  width: 100px; /* 演示用固定宽度 */
}

<div class="scrollable">
  <div class="containing">
    <div class="sticky">Sticky</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
  </div>
</div>

方法2：使用width: fit-content+min-width:100% #

直接让内部容器宽度完全由子元素总宽度决定，同时保证子元素较少时撑满父容器：

.containing {
  display: flex;
  width: fit-content;
  min-width: 100%;
}

注意事项 #

• 给sticky元素添加背景色可避免滚动时被后续子元素遮挡，优化视觉体验。
• 两种方案均无需手动指定内部容器的具体宽度，完全由布局自动适配。

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