CSS Grid父容器横向溢出问题：粘性列被挤出视口原因咨询

你给col1设置的sticky left-0，其粘性定位的参照对象是父级的grid容器，而非外层带w-screen overflow-x-auto的滚动容器。

当横向滚动时，grid容器本身会在滚动容器内向左偏移，一旦grid容器的左侧边缘超出视口，col1的left-0是相对于grid容器的左侧而非视口左侧，所以它会跟着grid容器一起被挤出视口。

要让col1固定在视口左侧，得让它的粘性定位参照外层滚动容器。可以调整结构，把col1和其他列的容器拆分，让col1直接作为滚动容器的子元素：

<div className="w-screen overflow-x-auto flex">
  <div className="sticky left-0 bg-green-200 w-[100px]">col1</div>
  <div className="grid grid-cols-[repeat(6,_100px)] bg-blue-200">
    <div>col2</div>
    <div>col3</div>
    <div>col4</div>
    <div>col5</div>
    <div>col6</div>
    <div>col7</div>
  </div>
</div>

如果想保留原有grid结构，也可以给grid容器添加min-width: fit-content，但这种方式在部分场景下存在兼容性问题，拆分结构的方式更稳妥。

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