CSS - 位置：绝对不能将 div 置于所有其他元素之上

Question

我正在使用 Javascript（更具体地说是 VueJS 框架）构建一个名为 mainTextEditor 的页面，该页面具有一个文本字段和一个使用带有 v-if 的 div 创建的“弹出窗口”，当条件满足时显示该 div。

请注意，这是另一个组件中的一个组件，就像这样（使用 main-text-editor 插入）：

<template>
    <v-card flat>
        <div class="background-colour-grey form-title temp-build-ellipse temp-build-overflow d-flex">
            <v-card-title class="form-title pl-0 pr-1">{{ itemHere.name }}</v-card-title>
        </div>
        <v-card-actions>
            <div
                class="mt-0 pa-0"
            >
               // HERE IS WHERE THE COMPONENT IS INSERTED
               <main-text-editor
                   class="mt-0 pt-0 background-colour-grey"
               />
            </div>
        </v-card-actions>
    </v-card>
</template>

这是用于生成上面的 mainTextEditor 文本字段和弹出窗口的代码：

<template>
    <div class="my-auto width-100" style="position: relative !important;">
        <v-card flat>
            <v-text-field :editor="editor"/>
        </v-card>
        <div class="formula-options" v-if="editorContentIsUsingFormulas">
            <v-list class="pt-0 pb-0" dense v-for="item in filteredItems" :key="item.id" >
                <v-list-item class="d-flex">
                    <v-list-item-title>
                        <strong>{{ item.name }}</strong>{{ item.structure }}
                    </v-list-item-title>
                </v-list-item>
            </v-list>
        </div>
    </div>
</template>

editorContentIsUsingFormulas 在文本框被点击时为真

上面使用的 CSS 样式：

.formula-options {
    z-index: 2 !important;
    background-color: white;
    width: 30vw;
    max-height: 40vh;
    overflow-y: scroll;
    position: absolute !important;
    border-radius: 20px;
    border: 2px solid grey;
    margin-left: 3px;
}

.temp-build-ellipse {
    max-height: 39.98px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.temp-build-overflow {
    height: 39.98px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space:nowrap
}

问题在于，尽管 div 的样式已设置为显示 position: absolute，但如果相关文本字段位于页面底部，则它会创建超出整个页面 100vh 的空白。

这是页面中间的样子：

这是底部的样子（请注意，紫色代表整页）：

这是页面侧面的文本字段的样子（请注意，右侧的白色部分是页面的末尾，我再也看不到 div 的右侧）：

我假设因为 div 位于标签的底部，所以它位于文本字段的底部。但是，我的印象是 position: absolute 应该解决它，尽管情况似乎并非如此。我可能做错了什么？

Answer 1

嗯.. 有趣。你可以试试 min-height: 100vh 吗？对不起，如果我误解了这个问题。