xterm.js FitAddon: max-width & textarea line wrapping

I am trying to create a full-size terminal using xterm.js and the fit-addon. This is my code:

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

<div id="remote-shell" style="height:100%; width: 100%"></div>

<script>
   const term = new Terminal({
                   cursorBlink: true,
                   macOptionIsMeta: true
                });
   const fitAddon = new FitAddon.FitAddon();
   term.loadAddon(fitAddon);
   term.open(document.getElementById('remote-shell'));
   fitAddon.fit();
</script>

In the picture, you can see the issues:

1. Even though the remote-shell div seems to be full width, xterm has a limited width.
2. After reaching the xterm width limit, there is no line breaking. The line simply 'overwrites' the previous contents (notice the position of the cursor).