是否可以在相对元素的框之外显示相对元素的绝对子元素，如果该框是溢出的：auto？

问：

我正在尝试将深度嵌套的文件夹结构表示为可单击的多级下拉菜单。这是我现在在行动的快速示例。下面是一个 HTML 示例：

<div class="bookmark-container">
    <ul class="bookmark-list">
        <li class="folder">
            <a href="#" class="folder-title">TITLE</a>
            <ul class="root inactive">
                <li class="subfolder inactive">
                    <a href="#" class="subfolder-title">TITLE</a>
                    <ul class="subroot inactive">
                        <li class="file inactive">FILE</li>
                        <li class="file inactive">FILE</li>
                    </ul>
                </li>
                <li class="file inactive">FILE</li>
                <li class="file inactive">FILE</li>
            </ul>
        </li>
    </ul>
</div>  

正如你所看到的，它是由表示文件夹和子文件夹的嵌套元素以及表示文件的元素组成的。下面是该 HTML 的 CSS：<ul><li>

.folder, .subfolder {
    position: relative;
}
.root, .subroot {
    display: flex;
    flex-direction: column;
    position: absolute;
}
.subroot {
    left: 100%;
    top: 0;
}

到目前为止，这实际上非常有效。使用 JavaScript，我可以在单击它们所属元素时显示和隐藏嵌套元素，这一切都很棒。但是，如果我抛出：<ul><li>

ul {
    overflow-y: auto;
}

我需要表示比我的视口可以处理的文件夹更大的文件夹，绝对定位的元素不再可见，因为它们在其相对父元素之外的可见性取决于它可以溢出的事实。这是滚动垂直溢出的结果。.subroot

我已经有点看出问题所在了。我需要更改具有 or 属性的父元素，以便子元素能够溢出，但我一直在尝试在两者之间添加 s 和其他元素并更改 CSS 属性目标，但似乎没有任何效果。overflow-y: auto;position: relative;position: absolute;<div>