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

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>

我删除了位置：固定，但仍然无法正常工作！

Answer 1

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

这是另一个快照，我在整页上运行片段时拍摄了它。在这里，绿色条使用其分配的高度（50px）清楚地看到。

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

Answer 2

对于仍然存在问题的任何人，它似乎确实是与Flex容器和引起问题的粘性子元素的互动。您可以尝试添加填充物，而不是指定高度。那对我有用。 （我会在@ddmteetu的主题下发布此信息，但我还没有足够的声誉）