В настоящее время я работаю с довольным Div в моей CSS-сетке.Мне нужен адаптивный дизайн, и тут возникает проблема.
Итак, у меня есть следующая сетка:
.calculator-grid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 56px 100px 10vh auto 50px;
height: 100vh;
grid-gap: 5px;
background-color: black;
}
Для 2-й строки в html я поставил следующее:
<div contenteditable="true" id="input" name="inputField" class="dontRapeEverything" placeholder ="0">
Все это прекрасно работает, пока введенные символы не превышают ширину экрана.Я ожидаю, что это сделает его прокручиваемым, чтобы пользователь мог прокручивать его влево и вправо, но теперь он в конечном итоге расширяет ширину всей моей сетки, что делает ее действительно неудобной.
Есть ли способ динамического ограничения ширины?Это прекрасно работает, когда я устанавливаю ширину вручную, например, 400px, но не с% или vh.
Я действительно не понимаю, что здесь происходит, и любая помощь приветствуется.