Scrollable div功能失效求助：三列独立滚动需求异常

问题描述 #

目标是实现页面三列独立滚动，该功能此前正常但突发失效，无法定位导致div无法滚动的原因。

代码展示 #

HTML #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Test Title</title>
    <link rel="stylesheet" href="styles.css" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Space+Mono" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bitter" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Anton" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" />
</head>

<body>
    <header>
        <h1>Test Title <span class="author">by author</span></h1>
        <nav>
            <a>Home</a>
            <a>About</a>
            <a>Links</a>
            <a>Projects</a>
        </nav>
    </header>
    <main>
        <section class="col-1">
            <div class="article">
                <h2><span class="post-date">18 Sep 22</span> Article Title</h2>
                <p class="para-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet quisquam ipsam sunt architecto voluptates officiis nihil eligendi harum aliquid, molestias soluta blanditiis tempora esse error, numquam delectus? Voluptates, itaque iure.</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet quisquam ipsam sunt architecto voluptates officiis nihil eligendi harum aliquid, molestias soluta blanditiis tempora esse error, numquam delectus? Voluptates, itaque iure.</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet quisquam ipsam sunt architecto voluptates officiis nihil eligendi harum aliquid, molestias soluta blanditiis tempora esse error, numquam delectus? Voluptates, itaque iure.</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet quisquam ipsam sunt architecto voluptates officiis nihil eligendi harum aliquid, molestias soluta blanditiis tempora esse error, numquam delectus? Voluptates, itaque iure.</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet quisquam ipsam sunt architecto voluptates officiis nihil eligendi harum aliquid, molestias soluta blanditiis tempora esse error, numquam delectus? Voluptates, itaque iure.</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet quisquam ipsam sunt architecto voluptates officiis nihil eligendi harum aliquid, molestias soluta blanditiis tempora esse error, numquam delectus? Voluptates, itaque iure.</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet quisquam ipsam sunt architecto voluptates officiis nihil eligendi harum aliquid, molestias soluta blanditiis tempora esse error, numquam delectus? Voluptates, itaque iure.</p>    
            </div>
        </section>
    </main>
</body>
</html>

CSS #

html,
body {
    height: 100%;
    margin: 0;
    padding: 0 5px 25px;
    background-color: #eee;
    font-family: Roboto, sans-serif;
    font-size: 0.9rem;
    color: #333;
    font-weight: 300;
    overflow: hidden;
}

/* HEADER CONTENT */
header {
    padding-bottom: 5px;
}

h1 {
    margin: 0;
    padding: 1rem 0;
    font-size: 1.1rem;
    font-weight: 700;
}

.author {
    font-size: 1rem;
    font-weight: 300;
}

nav {
    border: 2px solid #ffc800;
    font-family: 'Space Mono', serif;
    font-size: 0.9rem;
    text-align: center;
    word-spacing: 1rem;
}

nav a {
    color: #333;
    border: 1px solid transparent;
    text-decoration: none;
}

/* MAIN BODY CONTENT */
main {
    display: grid;
    grid-template-columns: minmax(25rem, 1fr) minmax(25rem, 1fr) minmax(25rem, 1fr);
    column-gap: 1rem;
}

.col-1 {
    grid-column: 1;
    overflow-y: auto;
}

.col-2 {
    grid-column: 2;
    overflow-y: auto;
}

.col-3 {
    grid-column: 3;
    overflow-y: auto;
}

.about {
    font-size: 1rem;
}

h2 {
    font-family: Bitter, serif;
    font-size: 1rem;
    font-weight: 300;
}

h2 a {
    color: #333;
    text-decoration: none;
    border: 1px solid transparent;
}

.post-date {
    font-family: 'Space Mono', serif;
    font-size: 0.6rem;
    vertical-align: super;
}

.para-1 {
    margin: 0;
    font-family: Anton, sans-serif;
    font-size: 1.25rem;
    font-weight: 500;
    text-indent: 5%;
}

p:not(.para-1),
ul {
    font-family: 'Space Mono', serif;
}

/* OTHER */
a:hover {
    border: 1px solid purple;
}

b:hover {
    font-family: Anton, sans-serif;
}

i:hover {
    font-family: Bitter, serif;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-thumb {
    background: #888;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

问题原因 #

.col-1等列设置了overflow-y: auto但无法触发滚动，核心原因是容器没有明确的高度限制：

• html和body设置了height: 100%，但main元素没有高度约束，会被内部内容完全撑开，高度随内容无限延伸，导致列容器永远不会出现内容溢出的情况，自然不会显示滚动条。

修复方案 #

通过Flex布局让main占满页面剩余高度，确保列容器有明确的高度上限：

修改后的CSS关键代码 #

html, body {
    height: 100%;
    margin: 0;
    padding: 0 5px 25px;
    background-color: #eee;
    font-family: Roboto, sans-serif;
    font-size: 0.9rem;
    color: #333;
    font-weight: 300;
    overflow: hidden;
    /* 添加以下两行 */
    display: flex;
    flex-direction: column;
}

main {
    display: grid;
    grid-template-columns: minmax(25rem, 1fr) minmax(25rem, 1fr) minmax(25rem, 1fr);
    column-gap: 1rem;
    /* 添加以下两行 */
    flex-grow: 1;
    overflow: hidden;
}

修复逻辑 #

1. 将body设置为垂直方向的Flex容器，让内部元素按垂直方向排列；
2. 给main添加flex-grow: 1，使其自动占满body中除header之外的剩余空间；
3. 给main添加overflow: hidden，避免Grid布局的内容溢出到页面外；
4. 此时.col-1等列会继承main的高度，当内容高度超过容器高度时，overflow-y: auto就会生效，显示滚动条。

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