Sticky element in a nested child-CodePudding

I have the following html, contains a scrollable div and a list of children that are rows. The rows have a size larger than the width of the container, so a scrollbar is visible.

Each row has a cell that has width equal to the top most div, and a second cell which is not visible in the non scrolled view. Upon scrolling to the right, we can see it.

What I'd like to achieve is to leverage the sticky position of css, to make that sticky-cell always visible.

<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; left: 0px;"></div>
        </div>
    </div>
</div>

Could someone shed the light on why this cell-sticky div is not visible? Is there a way to achieve this functionality?

CodePudding user response：

I switched the sticky position to right: 0px instead of left: 0px based on this:

A stickily positioned element is an element whose computed position value is sticky. It's treated as relatively positioned until its containing block crosses a specified threshold (such as setting top to value other than auto) within its flow root (or the container it scrolls within), at which point it is treated as "stuck" until meeting the opposite edge of its containing block.

and this...

Note that a sticky element "sticks" to its nearest ancestor that has a "scrolling mechanism" (created when overflow is hidden, scroll, auto, or overlay), even if that ancestor isn't the nearest actually scrolling ancestor. This effectively inhibits any "sticky" behavior (see the GitHub issue on W3C CSSWG). MDN

This keeps the sticky div in view and stuck to the right edge of the nearest scrollable element (the outer-most div in this case) in a horizontal context only, until meeting the opposite edge of its containing block (div with id of 'row').

<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;">The arguments object is useful for functions called with more arguments than they are formally declared to accept. This technique is useful for functions that can be passed a variable number of arguments, such as Math.min(). This example function accepts any number of string arguments and returns the longest one:</div>
            <div id="cell-sticky"
                 style="background-color: red; height: 100px; width: 100px; position: sticky; right: 0px;"></div>
        </div>
    </div>
</div>