css - CSS-Grid 中的 Contenteditable Div 重新占用整个 Grid

Question

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

所以我有以下网格:

      .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%`

为我工作。显然，这限制了我外部网格的宽度，因此内部的任何东西都不能越过它。