Need help figuring out how to make just the text portion of the popup window vertically scrollable-CodePudding

I'm trying to learn CSS and web design and I am stuck on how to make this work. I have a page that calls up a pop-up information window. However, there is a lot of text and it ends up pushing the window out of frame and therefore a user can't access the 'X' to close the window. I'd like to make it so the window doesn't expand, but the text portion can be vertically scrolled through. I've tried many various things dealing with overflow and overflow-y, but nothing seems to work. The HTML part of the code is:

    <div  id="popup-experience">
                <div >
                    <div >
                        <img src="img/some.jpg" alt="some photo" >
                        <!-- <img src="img/some-other.jpg" alt="some other photo" > -->
                    </div>
                    <div >
                        <a href="#section-resume" >&times;</a>
                        <h2 >Work Experience</h2>
                        <h3 >Below is a list of my experience</h3>
                        <p >
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed blandit libero volutpat sed cras ornare arcu dui. Ultrices sagittis orci a scelerisque purus semper eget duis. Et netus et malesuada fames ac turpis egestas sed tempus. Mauris a diam maecenas sed. Eget dolor morbi non arcu risus. Volutpat sed cras ornare arcu dui vivamus arcu felis bibendum. Bibendum ut tristique et egestas quis ipsum suspendisse ultrices. Venenatis tellus in metus vulputate eu scelerisque. Orci nulla pellentesque dignissim enim sit. Vestibulum sed arcu non odio euismod. Dolor morbi non arcu risus. Rhoncus est pellentesque elit ullamcorper dignissim cras. Cursus mattis molestie a iaculis. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor. Felis imperdiet proin fermentum leo vel.

Auctor elit sed vulputate mi sit amet mauris commodo quis. Diam volutpat commodo sed egestas. Libero id faucibus nisl tincidunt eget nullam. Sed arcu non odio euismod lacinia at quis risus. Suscipit tellus mauris a diam maecenas sed enim ut. Molestie a iaculis at erat pellentesque adipiscing commodo elit. Nulla malesuada pellentesque elit eget gravida cum. Risus viverra adipiscing at in tellus integer feugiat scelerisque varius. Sagittis vitae et leo duis ut diam quam nulla porttitor. Amet consectetur adipiscing elit pellentesque habitant morbi tristique senectus. Est placerat in egestas erat imperdiet sed. A diam maecenas sed enim ut sem viverra aliquet. Enim eu turpis egestas pretium.

Adipiscing commodo elit at imperdiet dui accumsan sit amet. Turpis massa tincidunt dui ut ornare lectus sit. Venenatis a condimentum vitae sapien pellentesque habitant morbi tristique senectus. Non pulvinar neque laoreet suspendisse interdum. Nullam eget felis eget nunc lobortis mattis. Dictum fusce ut placerat orci nulla pellentesque. Id leo in vitae turpis massa sed elementum tempus egestas. Ultrices tincidunt arcu non sodales neque. Aliquet lectus proin nibh nisl. Morbi tincidunt ornare massa eget egestas purus viverra accumsan. Hac habitasse platea dictumst quisque sagittis purus sit. Nibh cras pulvinar mattis nunc sed blandit libero. Quis viverra nibh cras pulvinar. Sapien faucibus et molestie ac. Sit amet justo donec enim diam vulputate ut. Commodo sed egestas egestas fringilla phasellus faucibus. Enim nunc faucibus a pellentesque sit. Aenean pharetra magna ac placerat.
                        </p>
                        <a href="#popup-nextpage" >Go to next area &rarr;</a>
                    </div>
                </div>
            </div>

The CSS is:

.popup {
    height: 100vh;
    width: 100%;

    overflow:auto;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba($color-black, .8);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all .3s;

    @supports (-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px)) {
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        background-color: rgba($color-black, .3);
    }

    &__content {
        @include absCenter;

        width: 75%;
        background-color: $color-white;
        box-shadow: 0 2rem 4rem rgba($color-black, .2);
        border-radius: 3px;
        display: table;
        overflow: hidden;
        opacity: 0;
        transform: translate(-50%, -50%) scale(.25);
        transition: all .5s .2s;
    }

    &__left {
        width: 33.333333%;
        display: table-cell;
    }

    &__right {
        width: 66.6666667%;
        display: table-cell;
        vertical-align: middle;
        padding: 3rem 5rem;
    }

    &__img {
        display: block;
        width: 100%;
    }

    &__text {
        font-size: 1.4rem;
        margin-bottom: 4rem;

        -moz-column-count: 2;
        -moz-column-gap: 4rem; //1em = 14px;
        -moz-column-rule: 1px solid $color-grey-light-2;

        column-count: 2;
        column-gap: 4rem; //1em = 14px;
        column-rule: 1px solid $color-grey-light-2;

        -moz-hyphens: auto;
        -ms-hyphens: auto;
        -webkit-hyphens: auto;
        hyphens: auto;
    }

    &__text-small{
        // font-size: 1.09rem;
        font-size: 1.2rem;
        margin-bottom: 4rem;

        -moz-column-count: 2;
        -moz-column-gap: 4rem; //1em = 14px;
        -moz-column-rule: 1px solid $color-grey-light-2;

        column-count: 2;
        column-gap: 4rem; //1em = 14px;
        column-rule: 1px solid $color-grey-light-2;

        -moz-hyphens: auto;
        -ms-hyphens: auto;
        -webkit-hyphens: auto;
        hyphens: auto;
    }

    //Open states
    &:target {
        opacity: 1;
        visibility: visible;
    }

    &:target &__content {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    &__close {
        &:link,
        &:visited {
            color: $color-grey-dark;
            position: absolute;
            top: 2.5rem;
            right: 2.5rem;
            font-size: 3rem;
            text-decoration: none;
            display: inline-block;
            transition: all .2s;
            line-height: 1;
        }

        &:hover {
            color: $color-primary;
        }
    }
}

So I want just the Lorem ipsum part to be vertically scrollable. Any thoughts/help would be appreciated!

CodePudding user response：

You can set an overflow: scroll value.

Another solution would be to make sure your popup has no fixed heigth, that way the content just follows the flow of the webpage. I haven't tested your code to see how big the popup is, but I'm assuming the popup exceeds the screen heigth (while you have set the popup to be 100vh with an overflow: hidden value that'll cut off anything larger than that.)

Maybe you can try to play around with the heigth, set it to auto or 100%.

CodePudding user response：

I think I figured it out. I had to remove the columns in the popup_text part of the CSS and set overflow:scroll, but for some reason it doesn't scroll vertically and instead does so horizontally. To improve the look I changed overflow-x:hidden. Lastly, I had to add a height: 25rem.

It's not perfect and less than what I had hoped for, but it's not horrible looking and works. It would have been nice to have 2 columns or even without columns and having it vertically scroll in the window.