Explicitly size selectionContainer to allow for more flexible layouts

src/Viewport.ts

@@ -57,6 +57,7 @@ export class Viewport {
       if (rowHeightChanged || viewportHeightChanged) {
         this.lastRecordedViewportHeight = this.terminal.rows;
         this.viewportElement.style.height = this.charMeasure.height * this.terminal.rows + 'px';
+        this.terminal.selectionContainer.style.height = this.viewportElement.style.height;
       }
       this.scrollArea.style.height = (this.charMeasure.height * this.lastRecordedBufferLength) + 'px';
     }

src/xterm.css

@@ -190,8 +190,6 @@
     position: absolute;
     top: 0;
     left: 0;
-    right: 0;
-    bottom: 0;
 }
 
 .terminal .xterm-selection div {

src/xterm.js

@@ -696,7 +696,7 @@ Terminal.prototype.open = function(parent, focus) {
 
   this.charMeasure = new CharMeasure(document, this.helperContainer);
   this.charMeasure.on('charsizechanged', function () {
-    self.updateCharSizeCSS();
+    self.updateCharSizeStyles();
   });
   this.charMeasure.measure();
 
@@ -776,10 +776,10 @@ Terminal.loadAddon = function(addon, callback) {
  * Updates the helper CSS class with any changes necessary after the terminal's
  * character width has been changed.
  */
-Terminal.prototype.updateCharSizeCSS = function() {
+Terminal.prototype.updateCharSizeStyles = function() {
   this.charSizeStyleElement.textContent =
       `.xterm-wide-char{width:${this.charMeasure.width * 2}px;}` +
-      `.xterm-normal-char{width:${this.charMeasure.width}px;}`
+      `.xterm-normal-char{width:${this.charMeasure.width}px;}`;
 }
 
 /**