Erstellen Sie einen Flex-Container-Scroll ⇐ CSS

[Anonymous]

Ich habe einen Flex-Container mit diesen Stilen:

Code: Select all

section {
width: 100vw;
height: 100vh;
display: flex;
overflow-y: scroll;
justify-content: center;
align-items: center;
flex-direction: column;
}

Dieser Abschnitt hat einige untergeordnete Elemente (z. B. zwei Divs mit #eins und #zwei ID). Wenn ich ihre Höhe auf height: 100%; setze, erwarte ich, dass sie den Abschnitt scrollen lassen (weil 2*100% = 200%, oder?). aber stattdessen überfluten sie einfach den Abschnitt. Wie erreiche ich das?
Um genauer zu sein, im folgenden HTML:

Code: Select all

Hi im div 1!
Hi im div 2!


Hi im div 3!

und das folgende CSS für Body und div#root:

Code: Select all

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%;
}

Ich möchte, dass der erste Abschnitt scrollbar ist und der zweite genau in das Ansichtsfenster passt. Es ist klar, dass div#root auch scrollbar sein wird.