定位粘性和溢出滚动限制？

Question

溢出滚动或位置粘贴是否有任何限制？我创建了演示，如果你滚动到最左边（所有卡都堆叠），而不是看最右边的卡。一切都好。但是，如果我改变最右边卡的左值，让我们说1400px或类似的东西，卡不会向右移动。同样地，我测试了这个，我在倒数第二张卡片上添加了1400px，卡片将移动到它有多少空间，直到到达包装边框的左侧。但是如果向后滚动，所有项目都将超出包装器的右边界。 演示（此代码在此编辑器中无效）：

＆＃13;

＆＃13;

:root {
    --left: 60px;
}
body {
    margin: 0;
    padding: 0;
}
.wrapper {
    width: 1442px;
    border-right: 1px solid #f2f2f2;
    border-bottom: 1px solid #f2f2f2;
    display: flex;
    overflow: scroll;
}
.wrapper, .box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8 {
    position: sticky;
    height: 750px;
} 

.box1 {
    min-width: 357px;
    background-color: #1a1a1a;
    left: calc(var(--left) * 0);
}
.box2 {
    min-width: 357px;
    background-color: #333;
    left: calc(var(--left) * 1);
}
.box3 {
    min-width: 702px;
    background-color: #4d4d4d;
    left: calc(var(--left) * 2);
}
.box4 {
    min-width: 630px;
    background-color: #666;
    left: calc(var(--left) * 3);
}
.box5 {
    min-width: 630px;
    background-color: #808080;
    left: calc(var(--left) * 4);
}
.box6 {
    min-width: 357px;
    background-color: #999;
    left: calc(var(--left) * 5);
}
.box7 {
    min-width: 630px;
    background-color: #b3b3b3;
    left: calc(var(--left) * 6);
}
.box8 {
    min-width: 630px;
    background-color: #ccc;
    left: calc(var(--left) * 7);
}

＆＃13;

<div class="wrapper">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
  <div class="box5"></div>
  <div class="box6"></div>
  <div class="box7"></div>
  <div class="box8"></div>
</div>

＆＃13;

＆＃13;

＆＃13;