gpt4 book ai didi

html - 为什么绝对定位元素的子元素在 overflow-y 时不扩展其父元素宽度?

转载 作者:行者123 更新时间:2023-11-28 02:26:14 29 4
gpt4 key购买 nike

我有一个附加到页面主体的绝对定位元素。它的高度或宽度没有限制。我有一个包含列表的绝对元素的子元素,它的高度限制在 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/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com