Make a flex container scroll-CodePudding

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.

CodePudding user response：

As your description, I created the sample scenario and it's working. or am i missing something ?

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

.sec1{
  height: 200px;
  width: 200px;
  overflow-y: scroll;
}

#one{
  height: 250px;
}

<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>

CodePudding user response：

you have to make the section shorter, so its content don't have enough place to fit, then the overflow set the scroll automatically

section {
  width: 100vw;
  height: 25vh; //<-- 
  display: flex;
  overflow-y: auto;/*<-- scroll forces all sections to have handler and this is not recommended in you example*/
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

body {
  width: 100%; /* <-- just to show you the scrollbar */
  height: 100vh;
  /* overflow-x: hidden;<-- no need */
  /* overflow-y: scroll;<-- no need */
  scroll-behavior: smooth;
}

#root {
  width: 90%; /* <-- just to show you the scrollbar */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#one,
#two {
  height: 100%;
}

<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>

check this and this if you don't have any idea about overflow.

CodePudding user response：

While Saurot's answer was very helpful, i found that the solution was setting flex: 0 0 100% for child divs. thanks everyone! :D