xterm.js initial height and scroll bar problems

I am using xterm javascript control, and it is not sizing/resizing properly. I have the following HTML, creating two panes via div, left pane for xterm and right pane for a future side bar.

  <div id="panes" class="panes">
    <div id="terminal-pane" class="terminal-pane"></div>
    <div id="sidebar-pane" class="sidebar-pane"></div>
  </div>

With styles

    html, body {
      height: 100%;
      margin: 0;
    }

    div.panes {
      width: 100%;
      height: 100%;
      display: flex;
    }

    div.terminal-pane {
      width: 70%;
      height: 100%;
      overflow: hidden;
    }

    div.sidebar-pane {
      width: 30%;
      height: 100%;
    }

The xterm is created with

  <link rel="stylesheet" href="node_modules/xterm/css/xterm.css" />
  <script type="text/javascript" src="node_modules/xterm/lib/xterm.js"></script>
  <script type="text/javascript" src="node_modules/xterm-addon-fit/lib/xterm-addon-fit.js"></script>

  <script>
    var fitAddon = new FitAddon.FitAddon();
    var term = new Terminal();
    term.loadAddon(fitAddon);
    term.open(document.getElementById('terminal'));
    fitAddon.fit();
  </script>

At term.open, when I place a breakpoint, I see the initial width is sized to the table cell width, but the height of the terminal is 25 lines fixed. I expected the height to be sized to the table cell height.

Issue 1: can I do something to make term.open create the terminal initially full height?

Next, after fitAddon.fit, the terminal is resized to an integral of the character dimensions. The width might shrink a few pixels if it is not an even multiple of characters, and the height similarly stretches down all the way, minus any pixels that another row will not fit into.

Issue 2: can the term.open create the terminal on integrals of character width/height, or can I calculate and adjust the div before calling term.open?

Issue 3: the fitAddon.fit isn’t positioning the scroll bar properly. The terminal is on top of it and the left side of the scroll bar can get covered. Is there a way to fix this?

Finally, I add this:

  <script>
    function onSize() {
      if (fitAddon !== undefined) {
        fitAddon.fit();
      }
    }
    window.addEventListener('resize', onSize, false);
  </script>

I should see fitAddon.fit resize the terminal when the browser is resized.

Issue 4: If the width changes but the row count does not, the scroll bar does not move. When sizing bigger, the terminal will cover it, and when sizing smaller, the scroll bar will be clipped. When sizing to its initial position, part or all of the scroll bar shows up. However, if the terminal contains enough lines to scroll, the scroll bar will move with resize.

What should I be doing differently?