为何.carousel-list无法实现水平滚动？前端布局问题求助

问题根源 #

你当前的代码有几个关键问题导致水平滚动不生效：

• 错误设置了垂直滚动属性overflow-y: scroll，而非水平方向的滚动
• Flex布局默认开启flex-wrap: wrap，子项会自动换行而非溢出容器
• 未限制.carousel-list的宽度，容器会被子项撑开，无法触发溢出滚动
• Flex子项默认flex-shrink: 1，会被压缩导致宽度达不到设置的400px

修改方案 #

调整你的SCSS代码，添加/修改以下属性：

.certificates-container{
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 99999;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    .certificates-exit-btn{
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 1em;
        padding: 0.5em 1em;
    }

    .carousel{
        display: block;
        // 限制carousel最大宽度，避免容器过宽
        max-width: 90vw;
        .carousel-list{
            border: 1px solid blue;
            padding: 2em;
            display: flex;
            // 开启水平滚动，auto仅在需要时显示滚动条
            overflow-x: auto;
            // 强制子项不换行
            flex-wrap: nowrap;
            // 限制容器宽度，触发溢出
            width: 100%;
            .slide{
                border: 1px solid green;
                width: 400px;
                // 禁止子项被压缩，固定宽度
                flex-shrink: 0;
                // 可选：给slide添加右侧间距
                margin-right: 1em;
                img{
                    display: block;
                    width: 100%;
                }
                p{
                    text-align: center;
                }
            }
        }
    }
}

关键修改说明 #

1. overflow-x: auto：替换原来的overflow-y: scroll，开启水平方向的滚动能力，auto会在内容溢出时才显示滚动条，更美观
2. flex-wrap: nowrap：强制所有.slide在同一行排列，不会自动换行到下一行
3. width: 100% + 父容器max-width：限制.carousel-list的宽度，让子项内容溢出容器，触发滚动
4. flex-shrink: 0：固定.slide的宽度，避免被Flex布局自动压缩

修改完成后，.slide会在.carousel-list内水平排列，溢出部分可以通过横向滚动查看。

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