CSS Flexbox垂直滚动不可见问题排查求助

阿华AIGC实验室

2026-5-14

Fixing Scrollable Test Area with Persistent Bottom Section

Hey there! I took a look at your code and found why the scroll functionality for your "Test" elements isn't working—let's break down the fixes step by step:

The Core Issues

Your .example container uses height: 100%, but without setting a fixed height on its parent elements (html and body), this percentage doesn't have a reference point to calculate from.
The .top section doesn't have a rule to fill the remaining space in the flex container, so the scrollable area never gets a defined height to enable scrolling.

The Fixed Code

Here's the updated version that keeps "Bottom" visible and makes the "Test" area scrollable:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* Add this to set root elements to full viewport height */
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        *, :after, :before {
            box-sizing: border-box;
        }
        .example {
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            /* Use 100vh to fill the entire viewport, or 100% if relying on html/body height */
            height: 100vh;
            max-height: 100%;
        }
        .bottom {
            overflow: auto;
            height: 140px;
            max-height: 100%;
            flex-shrink: 0;
            white-space: pre-wrap;
        }
        .top {
            position: relative;
            display: flex;
            /* Add this to make .top fill remaining space */
            flex-grow: 1;
            /* Prevent overflow from breaking the layout */
            overflow: hidden;
        }
        .scroll {
            overflow-y: scroll;
            width: 100%;
        }
        .elements {
            position: relative;
        }
        .test {
            margin-top: 20px;
        }
    </style>
</head>
<body style='overflow: hidden;'>
    <article class="example">
        <div class="top">
            <div class="scroll">
                <article class="elements">
                    <article class="test"> TEST </article>
                    <article class="test"> TEST </article>
                    <article class="test"> TEST </article>
                    <article class="test"> TEST </article>
                    <article class="test"> TEST </article>
                    <article class="test"> TEST </article>
                    <article class="test"> TEST </article>
                    <article class="test"> TEST </article>
                    <article class="test"> TEST </article>
                    <article class="test"> TEST </article>
                    <article class="test"> TEST </article>
                    <article class="test"> TEST </article>
                    <article class="test"> TEST </article>
                    <article class="test"> TEST </article>
                    <article class="test"> TEST </article>
                    <article class="test"> TEST </article>
                    <article class="test"> TEST </article>
                    <article class="test"> TEST </article>
                    <article class="test"> TEST </article>
                    <article class="test"> TEST </article>
                    <article class="test"> TEST </article>
                    <article class="test"> TEST </article>
                    <article class="test"> TEST </article>
                    <article class="test"> TEST </article>
                    <article class="test"> TEST </article>
                    <article class="test"> TEST </article>
                    <article class="test"> TEST </article>
                    <article class="test"> TEST </article>
                </article>
            </div>
        </div>
        <article class="bottom"> Bottom </article>
    </article>
</body>
</html>

Key Changes Explained

html, body { height: 100%; margin: 0; padding: 0; }: Removes default browser margins/padding and sets the root elements to fill the entire viewport. This gives your .example container a valid reference for height calculations.
.example { height: 100vh; }: Ensures the main flex container takes up the full height of the viewport. Alternatively, you could use height: 100% since we set html/body to 100% height.
.top { flex-grow: 1; overflow: hidden; }: Makes the top section expand to fill all available space in the flex container (excluding the 140px tall .bottom section). The overflow: hidden ensures any content outside this section doesn't break the layout.

With these changes, your "Bottom" text stays fixed at the bottom, and the "Test" elements will scroll within their designated area perfectly.

内容的提问来源于stack exchange，提问作者Radek Anuszewski