html - 如何防止绝对定位的孙子拉伸(stretch)容器 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>