为什么 position:sticky with left:0 在可滚动容器内不工作？

Question

我有这个问题 - 我有一个包含一些行的容器，每行都有一个粘性左列，然后是多个其他列。现在在下面的示例中，这会起作用一段时间，但是当您滚动父容器时，粘性位置不再起作用，并且随着您滚动而被推动。

.container {
  overflow-x: scroll;
}

.row {
  display: flex;
  width: 100%;
  
}

.item {
  min-width: 173px;
}

.sticky {
  min-width: 250px;
  position: sticky;
  left: 0;
  background: red;
}

<div class="container">
  <div class="row">
    <div class="item sticky">STICKY ROW 1</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
  <div class="row">
    <div class="item sticky">STICKY ROW 2</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
  <div class="row">
    <div class="item sticky">STICKY ROW 3</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
</div>

有什么办法可以解决这个问题..还是有另一种方法来完成这个？？

我想要的结果是能够将粘性 div 卡在左侧 a0并让其他列滚动到下方..

现在我知道如果在overflow-x: scroll实际.row元素上它会按预期工作..但我可能有 100 多行所以滚动需要在父容器上

Answer 1

添加边框以更好地查看与使用块级元素和限制相关的问题width:100%（不是您设置的无用，而是块元素的默认行为）

.container {
  overflow-x: scroll;
}

.row {
  display: flex;
  border:1px solid;
}

.item {
  min-width: 173px;
}

.sticky {
  min-width: 250px;
  position: sticky;
  left: 0;
  background: red;
}

<div class="container">
  <div class="row">
    <div class="item sticky">STICKY ROW 1</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
  <div class="row">
    <div class="item sticky">STICKY ROW 2</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
  <div class="row">
    <div class="item sticky">STICKY ROW 3</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
</div>

考虑inline-flex用于解决问题的内联级元素。如果内容很小，请添加min-width:100%以确保至少覆盖100%宽度。

.container {
  overflow-x: scroll;
}

.row {
  display: inline-flex;
  min-width: 100%;
  border:1px solid;
}

.item {
  min-width: 173px;
}

.sticky {
  min-width: 250px;
  position: sticky;
  left: 0;
  background: red;
}

<div class="container">
  <div class="row">
    <div class="item sticky">STICKY ROW 1</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
  <div class="row">
    <div class="item sticky">STICKY ROW 2</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
  <div class="row">
    <div class="item sticky">STICKY ROW 3</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
</div>

一些相关问题：

左边为零的嵌套粘性元素不粘性

在 css 中使用位置粘性时，为什么我的元素不粘在左边？