I have a page with an h1 and a p on top, and a div on the bottom.

The div have 2 divs inside, but it isn’t allowing me to see the whole thing on mobile. As in it isn’t allowing me to scroll.

I do NOT want overflow-y because I want the entire page to scroll if the content is too large.

What is wrong here?

Container CSS:

#shapes {
  width: 100vw;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  overflow-y: visible;
}

HTML:

`<div id='noPw-email'>
    <div id='nopw-sucess'>
      <div class='tb-sucess' id='tb-sucesstop'>
        <p>Sucess!</p>
      </div>
      <img id='sucess-check' src='https://cdn.prestonkwei.com/circlewithcheck.png'>
      <div class='tb-sucess' id='tb-sucessbottom'>
        <p>You may now close this tab.<p>
      </div>
    </div>
    <h1>Select the Matching Shape</h1>
    <p>Check your device, and click the matching shape to finish logging in!</p>
    <div id='shapes'>
      <div id='shape1' class='email-shapeselect'>
        <img src='' class='emailshape' id='shape1-img'>
        <p class='pk-nm-tb' id='shape1-label'></p>
      </div>
      <div id='shape2' class='email-shapeselect'>
        <img src='' class='emailshape' id='shape2-img'>
        <p class='pk-nm-tb' id='shape2-label'></p>
      </div>
      <div id='shape3' class='email-shapeselect'>
        <img src='' class='emailshape' id='shape3-img'>
        <p class='pk-nm-tb' id='shape3-label'></p>
      </div>
    </div>
  </div>`

I tried adding overflow-y, but that didn’t do as I expected.