如何防止绝对定位的孙子拉伸容器scrollHeight / scrollWidth？

Question

我希望容器的滚动尺寸仅尊重其子容器。

不幸的是，子对象（在下面的示例中为.scrollable）包含绝对定位的元素，可能会超出子元素的范围。我希望容器滚动大小忽略这些溢出。

我该怎么办？

.container {
  width: 150px;
  height: 150px;
  border: 1px #ddd solid;
  overflow: auto;
}

.scrollable {
  width: 100px;
  margin: 5px;
  background: linear-gradient(#f79862, #fd6a02)
}

.row {
  width: 100%;
  position: relative;
  height: 30px;
  background: linear-gradient(#f79862, #fd6a02)
}

.overflow {
  position: absolute;
  top: 0;
  left: 20px;
  height: 400px;
  width: 30px;
  background: #09c;
  z-index: 2;
}

<div class="container">
  <div class="scrollable">
    <div class="row">
    </div>
    <div class="row">
    </div>
    <div class="row">
    </div>
    <div class="row">
      <div class="overflow">
      </div>
    </div>
    <div class="row">
    </div>
    <div class="row">
    </div>
    <div class="row">
    </div>
  </div>
</div>

在此示例的上下文中-我希望滚动在看到最后一条橙色线时立即结束，而不是显示所有蓝色条。

Answer 1

将overflow:hidden设置为.scrollable div，以使其不会超过其父div

尝试一下

.container {
  width: 150px;
  height: 150px;
  border: 1px #ddd solid;
  overflow: auto;
}

.scrollable {
  width: 100px;
  margin: 5px;
  background: linear-gradient(#f79862, #fd6a02);
  overflow: hidden; /*added here*/
}

.row {
  width: 100%;
  position: relative;
  height: 30px;
  background: linear-gradient(#f79862, #fd6a02)
}

.overflow {
  position: absolute;
  top: 0;
  left: 20px;
  height: 400px;
  width: 30px;
  background: #09c;
  z-index: 2;
}

<div class="container">
  <div class="scrollable">
    <div class="row">
    </div>
    <div class="row">
    </div>
    <div class="row">
    </div>
    <div class="row">
      <div class="overflow">
      </div>
    </div>
    <div class="row">
    </div>
    <div class="row">
    </div>
    <div class="row">
    </div>
  </div>
</div>