[SOLVED] Resize element to the bottom outside of the container or the screen

Resize element to the bottom outside of the container or the screen

I have a div with resize: both and a scrollable container. I want to drag it to the bottom and see my div growing indefinitely and the container scrolled to the top. Is that possible to do with pure CSS? The same issue applies to dragging textarea

.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>

Solution

A small amount of Javascript is required to manually scroll to the bottom(of the screen in that example). Also can add some throttling for performance optimization

const el = document.getElementById('observer')

// set of entries to skip initial resize call after mount to the dom
const entriesSeen = new Set();
let previousHeight;

const handleResize = ([entry]) => {
  const currentHeight = entry.target.clientHeight;

  if (!entriesSeen.has(entry.target)) {
    entriesSeen.add(entry.target);
    previousHeight = currentHeight;
    return;
  }

  if (previousHeight < currentHeight) {
     window.scrollTo({
      top: document.body.scrollHeight,
      behavior: 'smooth',
    });
  }
  previousHeight = currentHeight;
};
    
const observer = new ResizeObserver(handleResize)

observer.observe(el)

.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' id='observer'>
    <div>
      This <br>
      should <br>
      disappear<br>
      when<br>
      you<br>
      drag<br>
      to<br>
      bottom<br>
    </div>
  </div>
</div>