如何设置粘性元素的高度？

Question

这是粘性元素的一个简单示例，但我想知道为什么我不能为粘性元素（绿色块）设置高度。

.container {
    background: red;
    display: flex;
    flex-direction: column;
    height: 30vh;
    width: 150px;
    overflow: auto;
   /* position: fixed; */
}

.btn {
    background: green;
    position: sticky;
     height: 50px; /* why does not work?!! */
    bottom: 0;
    left: 0;
    right: 0;
}

<div class='container'>
        <div class='items'>
            <div>hello world </div>
            <div>hello world </div>
            <div>hello world </div>
            <div>hello world </div>
            <div>hello world </div>
            <div>hello world </div>
            <div>hello world </div>
            <div>hello world </div>
            <div>hello world </div>
            <div>hello world </div>
            <div>hello world </div>
            <div>hello world </div>
        </div>

        <button class='btn'>+</button>
    </div>

我删除了

position: fixed

但仍然不起作用！

Answer 1

看图片，这是我在检查您的代码片段时拍摄的快照，因为您可以看到绿色条具有您分配给它的完整高度，但有些它没有显示完整高度。

这是我在整个页面上运行您的代码片段时拍摄的另一个快照。在这里可以清楚地看到绿色条正在使用其指定的高度（50px）。

尽管您设置标记样式的方式不正确，但您将粘性元素保留在另一个固定元素中。您到底想要实现什么？

Answer 2

对于仍然对此有问题的人来说，似乎确实是与 Flex 容器和粘性子元素的交互导致了问题。您可以尝试添加填充，而不是指定高度。这对我有用。 （我会在 @Ddmteetu 的帖子下发布此内容，但我还没有足够的声誉）