Question

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

感谢所有帮助！

Answer 1

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

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

1 个答案: