How to make large fixed section scrollable on mobile

Question

I am developing a website and I have a slider with photos of people, that on click (using and event listener) displays a new section that was on display:none and it is 100vh and 100vw, which is great on desktop, but on mobile the text does not fit in 100vh and I want to make it scrollable, but it being a fixed section I do not know how.

(This is for a client and all the data is protected but here's my css now:

@media(min-width: 768px){
#sectionFranck{
    position:fixed!important;
    background-color: #000000d9;
    display:none;
    width: 100vw;
    height: 100vh;
    z-index:20;
    top:0;
    left:0;
        transition: 0.5s;
        animation-name:opacity;
    animation-iteration-count: 1;
    animation-duration: 0.4s;
}}
@media(max-width: 768px){
    #sectionFranck{
    position:fixed!important;
    background-color: #000000d9;
    width: 100vw;
    z-index:20;
    display:none;
    top:0;
    left:0;
    transition: 0.5s;
        animation-name:opacity;
    animation-iteration-count: 1;
    animation-duration: 0.4s;
}}

I have tried using Height:auto or more than 100vh but nothing makes it scrollable. I saw in some other threads that it should help making it Absolute instead of fixed but it only sends it to the top of the page, using top:0 and it is still not scrollable.

height: auto; Height:150vh; Position:absolute; . Nothing worked for me

Answer 1

It's difficult to understand what exactly you are trying to do as you haven't provided any HTML-code. That being said, have you tried putting a <div> element around the section you want to be scrollable? That way you could make the outer-div 100vh and the inner-div as high as you want to after which you can use overflow-y: scroll on the inner-div so you can scroll through the content.