CSS：粘性、弹性和溢出

Question

我一直在环顾四周，发现这是使用 Sticky 和 ​​Overflow 时众所周知的情况，但我仍然没有找到解决方案，可能也是因为使用了 Flex。

我的项目中有 display:Flex; 和 position:Sticky; 的旁白，我试图在内容溢出时使其可滚动。

整个网页都是用网格构成的，因为我想让旁边占据它的列的整个高度，所以我给了它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;
}

现在，当我向下滚动时，使用此代码会发生以下情况：

粘性根本不起作用。提前致谢。

Answer 1

你的信息还不够，你给网格设置了多少高度，在我看来肯定不是一个特定的数字，对吧？
所以设置 flex: 1 是不够的。旁边将占用它需要的所有空间。 Sticky 正在工作，但现在很想看到它。
尝试设置height: 80vh; 看看有什么不同。