Don't allow flex container to stretch beyond screen size

Question

I asked a question yesterday on setting up a flex layout for my scenario, Make inner div fill remaining height using flex, and it worked great in my larger project. I now am running into an issue where the items within that flex div extend past the page and the other container stretches further. I'd ideally like to have the items stay inside the container, and have the container have a scrollbar inside of it so the main portion of the page doesn't have to scroll - only the inside of the container. Any ideas why this doesn't work automatically?? I've tried moving some of the flex around and other various properties but no luck.

HTML/CSS:

<!DOCTYPE html>
<html>
    <head>
        <style>
            *{
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .home-content {
                display: flex;
                border: 1px solid black;
                height:100vh;
                flex-flow: column;
            }

            .container {
                flex: 1;
                border: 1px solid red;
                display: flex;
                flex-direction: column;
            }

            #listItems {
                border: 1px solid green;
                height: 100%;
            }

            #listItems > ul {
                display: flex;
                flex-flow: row wrap;
                list-style: none;
            }

            .item {
                border: 1px solid purple;
                width: 200px;
                height: 200px;
                margin-left: 4px;
            }
        </style>
    </head>
    <body>
        <div class="home-section">
            <div class="home-content">
                <div class="container">
                    <form>
                        <label for="example">Input</label>
                        <input type="text" name="example">
                    </form>
                    <div id="listItems">
                        <ul>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

EDIT: Technically I don't want a scroll on the main portion of the page, but would like the div with the green border to not extend past the page and have the items in it not extend past its border as well as when there's lots of items that are more than its height, I can just scroll within that div of listItems that has the green border. Kind of like if that listItems div were to just be a photo gallery and can scroll inside of it to view all of the images

Caleb Gross · Accepted Answer · 2021-11-20T05:56:38.660

Here try this:

<!DOCTYPE html>
<html>
    <head>
        <style>
            *{
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .home-section {
                display: flex;
                border: 3px solid black;
                height:100vh;
                flex-flow: column;
                max-height: 99vh;
            }

            .container {
                flex: 1;
                border: 3px solid red;
                display: flex;
                flex-direction: column;
                height: fit-content;
                max-height: 99vh;
                overflow: auto;
            }

            #listItems {
                border: 3px solid green;
                height: 99vh;
                overflow-y: auto;
            }

            #listItems > ul {
                display: flex;
                flex-flow: row wrap;
                list-style: none;
            }

            .item {
                border: 3px solid purple;
                width: 200px;
                height: 200px;
                margin-left: 4px;
            }
        </style>
    </head>
    <body>
        <div class="home-section">
            <div class="home-content">
                <div class="container">
                    <form>
                        <label for="example">Input</label>
                        <input type="text" name="example">
                    </form>
                    <div id="listItems">
                        <ul>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

I made it where the container is not bigger than the screen height, by adding a max-height. You can test it out by adding more code outside the container, and it will add another scrollbar. Also to change the max height go the the container and change the max height of it, and it will change the height. I made the borders a bit thicker so that it would be easier to visualize it.

This is very close to what I'm trying to achieve! Is there a way to make that `listItems` div with the green border not be bigger than the screen as well and have the scroll inside the green bordered div instead of the main portion of the page itself? I may be misunderstanding a few things with the layout setup or wording my question wrong though. — Hunter, Nov 20 '21 at 05:52
Try it now. I changed the border thickness so that it would be easier to see. — Caleb Gross, Nov 20 '21 at 05:57
I've marked this as the correct solution, this is perfect!! Was setting the overflow-y on the `listItems` div as well as the `max-height` on container what allowed you to achieve this? — Hunter, Nov 20 '21 at 06:01
Yes, If you set a max height or a max width it wont go past it. And thank you for remembering to click the check button! Not everyone does that when I answer there question, really helps! — Caleb Gross, Nov 20 '21 at 06:02

score 0 · Answer 2 · answered Nov 20 '21 at 05:06

0

add a overflow: scroll; to the container you don't want overflown.

answered Nov 20 '21 at 05:06

troublesome naw

86
3

I tried this both to the div that shouldn't overflow (listItems) so the items would stay within it but seemed like it has the same outcome – Hunter Nov 20 '21 at 05:19

score 0 · Answer 3 · answered Nov 20 '21 at 05:08

0

you can use

flex-wrap: wrap; this will keep everything under the limit of the screen size

answered Nov 20 '21 at 05:08

Tan

19
4

hmm I gave this a try but ran into the same issue, my `flex-flow: row wrap` technically had the wrap property included but tried it separately just in case – Hunter Nov 20 '21 at 05:19

score 0 · Answer 4 · answered Nov 20 '21 at 05:28

0

add overflow: scroll; to the home-content div

answered Nov 20 '21 at 05:28

xangetsue

15
5

This does add the scroll to the home-content area but technically I need it on the `itemsList` div so only that area will scroll - I tried the other suggestions and with overflow but still ran into the same thing too – Hunter Nov 20 '21 at 05:31
well, the itemsList div should have a specific height for that property to work properly.. change the height to say 800px and check – xangetsue Nov 20 '21 at 05:42

troublesome naw · Answer 5 · 2021-11-20T05:54:07.217

add overflow-flow: scroll; to .home-content/container and change the height on .home-content from 100vh to a pixel or percentage value. run the snippet

<!DOCTYPE html>
<html>
    <head>
        <style>
            *{
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .home-content {
            margin:0 auto;
            width: 70%;
                padding: 50px;
                display: flex;
                border: 1px solid black;
                height:250px;
                flex-flow: column;
                overflow: scroll;
            }

            .container {
                flex: 1;
                border: 1px solid red;
                display: flex;
                flex-direction: column;
            }

            #listItems {
                border: 1px solid green;
                height: 100%;
            }

            #listItems > ul {
                display: flex;
                flex-flow: row wrap;
                list-style: none;
            }

            .item {
                border: 1px solid purple;
                width: 200px;
                height: 200px;
                margin-left: 4px;
            }
        </style>
    </head>
    <body>
        <div class="home-section">
            <div class="home-content">
                <div class="container">
                    <form>
                        <label for="example">Input</label>
                        <input type="text" name="example">
                    </form>
                    <div id="listItems">
                        <ul>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                            <li class="item">Item</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

I had the HTML/CSS setup from the original question so that it'd be more responsive and not have a set amount of pixels for when I changed screens / window sizes, was there a way to achieve it with this? — Hunter, Nov 20 '21 at 05:48
yes try using a percentage width on the .home-content/container. check the snippet again i updated it — troublesome naw, Nov 20 '21 at 05:55

Don't allow flex container to stretch beyond screen size

5 Answers5