javascript - codemirror と xterm.js を使用すると、要素の高さがグリッド レイアウトの制限を超える

Question

次のコードのように、CodeMirror と Xterm.js を GridLayout に配置しようとしています。ここで指定1fr 200px 80pxしてgrid-template-rowsいますが、これに問題があります。

発生した問題

1. CodeMirror テキスト領域に十分なテキストが含まれている場合、テキストの量に応じて高さが増加します。からはみ出さずにスクロールバーを表示する動作を期待しています1fr。

2. xterm.js がコンテナからはみ出しています。xterm.js がコンテナからはみ出しています。で指定されたサイズに xterm.js が収まると思いますgrid-template-rows。

これらの問題を解決するにはどうすればよいですか? ありがとうございました。

const editor = CodeMirror.fromTextArea(document.getElementById("editor"), {
  lineNumbers: true,
  mode: "text/x-csrc",
  viewportMargin: Infinity
});
const codemirror = document.getElementById("code-mirror");
editor.setSize("100%", "100%");

const term = new Terminal();
term.open(document.getElementById('terminal'));
term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')

window.addEventListener("resize", function() {
  editor.setSize();
}, false);

.container {
  height: 100vh;
}

.editor {
  display: grid;
  grid-template-rows: 1fr 200px 80px;
  height: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/xterm/3.14.5/xterm.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xterm/3.14.5/xterm.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.2/codemirror.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.2/codemirror.min.js"></script>
<div class="container">
  <div class="editor">
    <div id="code-mirror">
      <textarea id="editor">
typedef struct {
  void* arg_socket;
  zmq_msg_t* arg_msg;
  char* arg_string;
  unsigned long arg_len;
  int arg_int, arg_command;

  int signal_fd;
  int pad;
  void* context;
  sem_t sem;
} acl_zmq_context;
    </textarea>
    </div>
    <div id="terminal">

    </div>
    <div class="footer">
      <button type="button">
        run
      </button>
    </div>
  </div>
</div>