html - 为什么绝对定位元素的子元素不会在溢出-y 上扩展其父宽度？

问题描述

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

感谢所有帮助！

标签： htmlcssoverflowabsolute

html - 为什么绝对定位元素的子元素不会在溢出-y 上扩展其父宽度？

问题描述

解决方案

推荐阅读