我目前正在我的 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。
我真的不知道这里发生了什么,感谢任何帮助。
最佳答案
grid-template-columns: 100%`
为我工作。显然,这限制了我外部网格的宽度,因此内部的任何东西都不能越过它。
关于css - CSS-Grid 中的 Contenteditable Div 重新占用整个 Grid,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50671085/