CSS: Sticky, Flex and Overflow

Question

I've been looking around and i found out this is a well known situation when working with Sticky and Overflow but i still don't get a solution, might be because of the use of Flex too.

I have an aside with display:Flex; and position:Sticky; in my project and i'm trying to make it scrollable when the content overflows.

The whole webpage is structured with Grid and as i want the aside to ocuppy the full height of its column i gave it flex:1;

HTML

    <aside class="aside">
        <nav class="aside-menu">
                <ul class="aside-menu__ul">
                    <li class="aside-menu__li">title</li>
                    <li class="aside-menu__li"><img src="" alt=""></li>
                    <li class="aside-menu__li">description</li>
                </ul>
        </nav>
    </aside>

CSS

.aside{
        position: sticky;
        top:14%;
        overflow-y: scroll;
        grid-row: 3 / 4;
        grid-column: 2 / 3;
        display: flex;
        flex-direction: column;
        flex: 1;
}

Now, with this code when i scroll down the next happens:

The sticky isn't working at all. Thanks in advance.

Co Pham Co Pham · Accepted Answer · 2021-03-09T14:33:56

Your information is not enough, how height has you set for the grid, it appears to me that it is definitely not a particular number, right?
So setting flex: 1 is not enough. The aside will take all the space it need. Sticky is working, but aside now is to long to see it.
Try setting height: 80vh; to see the difference.

CSS: Sticky, Flex and Overflow

1 Answers