Сделайте гибкий контейнерный свиток ⇐ CSS

[Anonymous]

У меня есть контейнер с этими стилями: < /p>

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

section {
width: 100vw;
height: 100vh;
display: flex;
overflow-y: scroll;
justify-content: center;
align-items: center;
flex-direction: column;
}
< /code>
В этом разделе есть некоторые дети (скажем, два Div с #one и #two ID). Когда я устанавливаю их высоту на высоту: 100%; 

я ожидаю, что они сделают прокрутку секции (потому что 2*100%= 200%, верно?). Но вместо этого они просто переполняют раздел. Как мне это достичь?

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

Hi im div 1!
Hi im div 2!


Hi im div 3!

и следующие CSS для тела и div#root :

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

body{
width: 100vw;
height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
scroll-behavior: smooth;
}
#root{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#one, #two{
height : 100%;
}
< /code>
Я хочу, чтобы первый раздел был прокручиваемым, а второй, чтобы точно соответствовать видовому доку. Ясно, что div#root 

тоже будет прокручиваемым.


Подробнее здесь: https://stackoverflow.com/questions/709 ... ner-scroll