CSS-сетки не очень хорошо работают с переполнением? [дубликат] ⇐ CSS

[Anonymous]

Это очень похоже на мой предыдущий вопрос. Я многому научился из этого, но, похоже, это не работает в данной конкретной ситуации, для которой я создал здесь упрощенный макет:

Код: Выделить всё

let box = document.getElementById('textbox');
for (let i = 0; i < 100; i++)
box.innerHTML += 'Lorem Ipsum ';

Код: Выделить всё

* {
box-sizing: border-box;
}

body {
margin: 0px;
overflow: hidden;
}

.grid {
display: grid;
grid-template-rows: 1fr;
border: solid 4px blue;
padding: 16px;
}

.fullscreen {
position: absolute;
left: 0px;
top: 0px;
height: 100vh;
width: 100vw;
border: solid 4px red;
}

#textbox {
padding: 4px;
width: 100px;
overflow-y: auto;
border: solid green 4px;
}

Код: Выделить всё

Красный элемент div должен занимать весь экран — не более того. не меньше.
Нижний зеленый элемент div представляет собой текстовое поле с возможностью прокрутки. Однако в этой конкретной конфигурации я не могу заставить его оставаться в пределах заданного мной макета сетки и отступов.
В этом случае вам нужно было удалить промежуточный синий элемент div или удалить верхний зеленый div, тогда текстовое поле будет вести себя правильно, но, конечно, это разрушает остальную часть существующего дизайна. Это также работает, если вы указываете конечный размер строки сетки, содержащей текстовое поле (например, 100 пикселей), но это также противоречит цели, поскольку я хочу, чтобы она занимала все вертикальное пространство.
Есть идеи, что происходит и как я могу это решить?


Подробнее здесь: https://stackoverflow.com/questions/786 ... h-overflow