移动端master-detail-subdetail布局：三栏横向并排异常求助

问题描述 #

在max-width:767px的移动端媒体查询场景下，需构建master-detail-subdetail布局，实现三个<section>元素横向并排显示。当前实现中第二个section（#div2）部分露出窗口，需修复该问题，支持Flex、Grid、定位或浮动等任意解决方案。

原始代码 #

HTML #

<div class="fluid">
    <section id="div1"></section>
    <section id="div2"></section>
    <section id="div3"></section>
</div>

CSS #

.fluid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;

    width: 300%;
    border: solid red 1px;
    overflow-x: scroll;
}
#div1 {
    width: 100%;
    grid-column: 1/span 1;
}
#div2 {
    width: 100%;
    grid-column: 2/span 1;
}
#div3 {
    width: 100%;
    grid-column: 3/span 1;
}

问题原因 #

当前Grid布局中，.fluid设置width:300%，同时每个section又设width:100%——这里的100%基于.fluid宽度计算，导致每个section实际宽度为视口的3倍，超出容器横向空间，进而出现元素溢出窗口的问题。

解决方案 #

以下提供两种简洁的修复方案，均适配移动端需求：

方案一：优化Grid布局 #

去掉冗余宽度设置，利用Grid特性实现横向滚动，每个section占满视口宽度：

@media (max-width: 767px) {
    .fluid {
        display: grid;
        grid-template-columns: repeat(3, 100vw); /* 每列宽度等于视口宽度 */
        overflow-x: scroll;
        border: solid red 1px;
        /* 可选：隐藏滚动条 */
        scrollbar-width: none;
    }
    .fluid::-webkit-scrollbar {
        display: none;
    }
    #div1, #div2, #div3 {
        height: 100vh; /* 可按需调整高度 */
        /* 添加背景色便于区分元素 */
        background-color: #f0f0f0;
    }
    #div2 {
        background-color: #e0e0e0;
    }
    #div3 {
        background-color: #d0d0d0;
    }
}

方案二：Flex布局实现 #

利用flex-shrink:0保证section不被压缩，固定宽度为视口宽度：

@media (max-width: 767px) {
    .fluid {
        display: flex;
        overflow-x: scroll;
        border: solid red 1px;
        scrollbar-width: none;
    }
    .fluid::-webkit-scrollbar {
        display: none;
    }
    #div1, #div2, #div3 {
        flex-shrink: 0; /* 禁止元素收缩 */
        width: 100vw; /* 宽度等于视口宽度 */
        height: 100vh; /* 可按需调整高度 */
        background-color: #f0f0f0;
    }
    #div2 {
        background-color: #e0e0e0;
    }
    #div3 {
        background-color: #d0d0d0;
    }
}

说明 #

两种方案均可实现三个section横向并排，每个元素占满视口宽度，滚动时能完整查看每个section内容。可根据项目现有布局习惯选择对应方案，同时可按需调整元素的高度、背景色等样式。

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