Auto scroll not working when viewport height is set

Details

• Browser and browser version: Chrome/Atom 1.18
• OS version: Manjaro
• xterm.js version: 2.9.2

Steps to reproduce

I’m trying to remove the half line gap below the viewport as described in https://github.com/sourcelair/xterm.js/issues/762. My method is to set the height on the viewport after an element resize event:

this.resizeObserver = new ResizeObserver(() => {
      this.terminal.fit()
      // fix the half row gap at bottom of terminal
      this.terminal.viewportElement.style.height = this.refs.xterm.clientHeight + 'px'
});
this.resizeObserver.observe(this.refs.xterm);

While this works, the side affect is when calling Terminal.write it no longer auto scrolls to the bottom.

Is there anything I can do to get the desired behaviour?

[twifty]

Thanks, I finally figured it out though. Nested flexboxes. I had to display: flex on the terminal element then margin-top: auto on the viewport.

[Tyriar]

Good luck 😃