纯CSS实现可缩放元素超出容器底部并触发容器自动滚顶的可行性咨询

嘿，我来帮你梳理这个问题～咱先明确说结论：纯CSS没办法直接实现你想要的效果——也就是拖拽带resize: vertical的div（或者textarea）到底部时，让元素无限增高，同时容器自动滚动到顶部。

为啥纯CSS搞不定呢？原因很简单：CSS的resize属性只是提供了手动调整元素尺寸的交互能力，但它没有内置的「检测元素尺寸变化」的机制，更没法触发容器滚动位置的自动调整。滚动位置的控制本质上是动态的行为，需要监听元素的尺寸变化并做出响应，这部分逻辑目前只能靠JavaScript来实现。

先看看你给出的示例代码的实际表现：

.container{
  height:100%;
  width:100%;
  overflow:scroll
}

.content{
  width:90%;
  height:200px;
  resize:vertical;
  border:solid 1px;
  margin-bottom:20px;
  overflow:scroll
}

<div class='container'>
  <div class='content'>
    <div>
      This <br>
      should <br>
      disappear<br>
      when<br>
      you<br>
      drag<br>
      to<br>
      bottom<br>
    </div>
  </div>
</div>

现在拖拽.content的底部边缘，元素会被拉长，但容器只会在元素高度超过自身高度时显示滚动条，不会自动滚动到顶部——这是纯CSS能做到的极限了。

如果一定要实现你想要的效果，得借助JS：比如用ResizeObserver监听.content的尺寸变化，每当它的高度增加时，就把.container的scrollTop设置为0。不过这就不符合你「纯CSS」的要求啦。

备注：内容来源于stack exchange，提问作者Stas