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

【问题标题】：Why does a child of an absolutely positioned element not expand its parent width on overflow-y?为什么绝对定位元素的子元素不会在overflow-y 上扩展其父元素的宽度？
【发布时间】：2019-05-22 02:16:17
【问题描述】：

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

【解决方案1】：

绝对定位元素不再是文档流的一部分，因此它们不再真正“在”它们的父元素中。因此它们不会影响父级的尺寸。

【讨论】：

虽然确实如此，但在这种情况下，父元素是绝对定位的元素（并且子元素在由该绝对定位元素建立的流中），因此文档流不会进入讨论全部。
我很抱歉，这可能是我在问题中的措辞，但这确实是@BoltClock 提到的关于父级（即绝对定位的块元素）没有扩展以适应子元素超过其最大高度时的子元素。