I have a flex container with this styles:
section { width: 100vw; height: 100vh; display: flex; overflow-y: scroll; justify-content: center; align-items: center; flex-direction: column;}this section has some children ( say like two divs with #one and #two id ). when i set their height to height: 100%; i expect them to make the section scroll( because 2*100% = 200%, right? ). but instead they just overflow the section. how do i achieve this ?
To be more specific, in the following HTML:
<body><div id="root"><section><div id="one">Hi im div 1!</div><div id="two">Hi im div 2!</div></section><section><div id="three">Hi im div 3!</div></section></div></body>and the following css for body and 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%;}I want the first section to be scrollable, and the second one to exactly fit the viewport. its clear that the div#root will be scrollable too.