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

你的信息不够，你给grid设置的高度是多少，我看肯定不是具体的数字吧？
所以设置flex:1是不行的。 aside 将占用它需要的所有 space 。 Sticky 正在工作，但现在却很想看到它。
尝试设置 height: 80vh; 以查看差异。

CSS：粘滞、弯曲和溢出

CSS: Sticky, Flex and Overflow

css

overflow

sticky

flexbox