嵌套子元素中设置CSS sticky定位的单元格不显示，如何实现固定可见

• sticky定位的生效规则为：仅当元素在滚动可视区的位置偏离你设置的left/right/top/bottom阈值时，才会触发固定效果，且sticky元素永远不会超出其直接父元素的边界，不会脱离父元素流。
• 你当前将position: sticky; left:0设置在了右侧的红色单元格上，它在父级flex容器中的初始X轴位置为600px（前序黄色单元格宽度为600px），这个位置本身就满足「距离滚动容器左侧≥0px」的规则，因此sticky不会生效，元素始终待在原位置，只有滚动到最右侧时才可见。
• 若要让右侧元素始终固定在可视区，需要设置right: 0而非left: 0，匹配你要固定在可视区右侧的需求。

如果你需要红色单元格始终固定在可视区右侧，全程可见，修改sticky配置即可，完整代码如下：

<div id="scrollable-container" style="background-color: lightgrey; height: 150px; width: 600px; overflow: auto;">
    <div id="fit" style="height: 150px; width: 800px;">
        <div id="row" style="height: 100px; width: 800px; display: flex;">
            <div id="cell" style="background-color: yellow; height: 100px; width: 600px;"></div>
            <div id="cell-sticky"
                 style="background-color: red; height: 100px; width: 100px; position: sticky; right: 0px;"></div>
        </div>
    </div>
</div>

如果你实际需要的是左侧黄色单元格固定在可视区左侧，滚动时不消失，把sticky配置迁移到黄色单元格即可：

<div id="cell" style="background-color: yellow; height: 100px; width: 600px; position: sticky; left: 0;"></div>

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