CSS-Grid中的Contenteditable重新设置整个网格

Question

我目前正在我的CSS-Grid中使用contenteditable。我需要一个响应式的设计，问题来了。

因此，我有以下网格：

      .calculator-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 56px 100px 10vh auto 50px;
    height: 100vh;
    grid-gap: 5px;
    background-color: black;
  }

对于html中的第二行，我输入了以下内容：

<div contenteditable="true" id="input" name="inputField" class="dontRapeEverything" placeholder ="0">

在输入的字符超出屏幕的宽度之前，这一切都可以正常工作。我希望它能做的是让它可以滚动，这样用户就可以左右滚动，但现在它最终扩展了我的整个网格的宽度，这使得它真的很笨拙。

有没有办法动态限制宽度？当我手动将宽度设置为400px时，它工作得很好，但不能使用%或vh。

我真的不知道这里发生了什么，任何帮助我都很感激。

Answer 1

grid-template-columns: 100%`

对我很管用。显然，这限制了我的外部网格的宽度，所以里面的任何东西都不能超过它。