我有一个附加到页面主体的绝对定位元素。它的高度或宽度没有限制。我有一个包含列表的绝对元素的子元素，它的高度限制在 y 轴上。此列表的长度和宽度可以变化，因此我宁愿不使用任何硬设置的填充或边距，也不要使用“overflow-y: scroll”，因为即使不需要，滚动条也会显示。
<style>
.the-absolute {
display: block;
position: absolute;
}
.the-list {
border: 1px solid blue;
display: flex;
flex-direction: column;
max-height: 100px; /* arbitrary limit for example */
overflow-y: auto;
white-space: nowrap;
}
</style>
<body>
<div class="the-absolute">
<div class="the-list">
<div>Title</div>
<div>Year</div>
<div>Studio</div>
<div>Worldwide</div>
<div>Domestic</div>
<div>Budget</div>
<div>Title</div>
<div>Year</div>
<div>Studio</div>
<div>Worldwide</div>
<div>Domestic</div>
<div>Budget</div>
</div>
</div>
</body>
我希望子元素的宽度在容纳滚动条的同时扩大父元素的宽度。相反，最长列表项的内容被右侧的滚动条重叠。
这在 Chrome 中的工作方式与我预期的一样，但在 IE11(惊喜!)、Firefox 或 Safari 中似乎效果不佳。
我在这里有点困惑，如果能更好地理解绝对定位如何影响元素的子元素，以及是否有办法让我拥有动态(即没有硬设置的边距、宽度等)列表，我将不胜感激如果它达到某个阈值而不重叠内容，则可以滚动。
我已经尝试了多次迭代和包装元素，但绝对定位导致了这种情况。我可以使用 JS 破解它，但更喜欢纯 CSS 解决方案。我只是假设我遗漏了一些细节，或者我缺少正确的关键字组合来通过 google/stackoverflow 找到解决方案。
感谢所有帮助!
最佳答案
绝对定位的元素不再是文档流的一部分，因此它们不再真正“位于”它们的父元素中。因此，它们不会影响父级的尺寸。
关于html - 为什么绝对定位元素的子元素在 overflow-y 时不扩展其父元素宽度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53887641/