Display Flex布局导致父div溢出页面的问题求助

核心问题分析 #

你的content div溢出页面主要有以下几个原因：

• 容器使用100vw作为宽度，会忽略浏览器垂直滚动条的宽度，导致横向溢出；
• flex布局下内容区的宽度设置错误，没有正确利用flex属性占据剩余空间；
• 缺少媒体查询来实现屏幕≤950px时侧边栏固定宽度的需求。

修正后的代码 #

CSS部分

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box; /* 全局统一盒模型，避免重复设置 */
}
.container {
    width: 100%; /* 替换100vw，避免滚动条导致的溢出 */
    height: 100vh;
    background-color: black;
    padding: 20px;
    display: flex;
    overflow: hidden;
}

.sidebar {
    height: 100%;
    border: 1px solid red;
    flex-shrink: 0;
    /* 默认侧边栏自适应，媒体查询中设置固定宽度 */
    width: 30%; 
}

.content {
    height: 100%;
    border: 1px solid blue;
    flex: 1; /* 自动占据容器剩余空间，无需设置width */
    margin-left: 20px; /* 可选：给侧边栏和内容区加间距 */
}

.holder {
    height: 40%;
    width: 100%;
    border: 1px solid yellow;
    display: flex;
    overflow-x: auto; /* 明确设置横向滚动，避免纵向滚动 */
    gap: 10px; /* 可选：给item之间加间距 */
    padding: 10px;
}

.item {
    height: 250px;
    width: 200px;
    border: 1px solid pink;
    flex-shrink: 0;
}

/* 媒体查询：屏幕≤950px时侧边栏固定400px */
@media (max-width: 950px) {
    .sidebar {
        width: 400px;
    }
}

HTML部分

<div class="container">
    <div class="sidebar"></div>
    <div class="content">
        <div class="holder">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>
</div>

关键修改说明 #

1. 容器宽度：将100vw改为100%，利用块级元素的默认宽度适配父容器，避免滚动条导致的横向溢出；
2. 内容区布局：给.content设置flex:1，让它自动填充容器剩余空间，删除多余的width:calc(100%)和flex-shrink设置；
3. 媒体查询：添加@media (max-width:950px)规则，仅在屏幕宽度≤950px时将侧边栏宽度固定为400px，符合需求；
4. 滚动优化：给.holder设置overflow-x:auto，明确只开启横向滚动，同时添加gap和padding优化item的排版；
5. 全局盒模型：将box-sizing:border-box放到全局选择器中，统一所有元素的盒模型计算方式，避免重复设置。

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