Сделать прокрутку гибкого контейнераHtml

Программисты Html
Ответить
Anonymous
 Сделать прокрутку гибкого контейнера

Сообщение Anonymous »

У меня есть гибкий контейнер со следующими стилями:

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

section {
width: 100vw;
height: 100vh;
display: flex;
overflow-y: scroll;
justify-content: center;
align-items: center;
flex-direction: column;
}
У этого раздела есть несколько дочерних элементов (скажем, два элемента div с #one и #two id). когда я устанавливаю их высоту на высоту: 100%; я ожидаю, что они будут прокручивать раздел (потому что 2*100% = 200%, верно?). но вместо этого они просто переполняют раздел. как мне этого добиться?
Чтобы быть более конкретным, в следующем HTML:

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



Hi im div 1!
Hi im div 2!


Hi im div 3!



и следующий CSS для body и 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%;
}
Я хочу, чтобы первый раздел можно было прокручивать, а второй точно соответствовал области просмотра. ясно, что div#root тоже будет прокручиваться.


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

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Html»