如何用SCSS实现HTML横向滚动视图？滚动失效问题排查修复

尝试让.mywork类实现横向滚动，已使用overflow-x属性但未生效。添加更多.infobox元素时，元素出现重叠而非横向滚动。使用SCSS/SASS开发，相关代码如下：

SCSS代码 #

.mywork {
    margin: 10% auto;
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    border: 2px solid red;
    width: 95%;
}

.infobox {
    background-color: $seaLightYellow;
    border-radius: 30px;
    max-width: 450px;
    width: 450px;
    height: 400px;
    margin: 10px;
    text-align: center;

    img {
        // border: 2px solid red;
        width: 100%;
        border-radius: 25px 25px 0 0;
    }

    a {
        font-weight: bold;
        font-size: 30px;
        background: none;

        &:hover {
            color: rgba(0, 81, 255);
        }
    }

    p {
        background: none;
        border-radius: 30px;
        padding: 10px;
        font-size: 15px;
    }
}

@media (max-width: 600px) {
    .mywork {
        flex-direction: column;
    }

    .infobox {
        width: 100%;
        height: auto;
    }
}

HTML代码 #

<div class="mywork">
        <div id="firstwork" class="infobox">
            <img src="{{ asset('img/new_image_1.jpg') }}" alt="No Internet" />

            <a target="_blank" rel="noreferrer" href="http://newlink1.com/">New Link 1</a>
            <p>This is a new project I created. It's very exciting!</p>
        </div>

        <div class="infobox">
            <img src="{{ asset('img/new_image_2.jpg') }}" alt="No Internet" />

            <a target="_blank" rel="noreferrer" href="http://newlink2.com/">New Link 2</a>
            <p>This is another new project. I'm proud of my work!</p>
        </div>

        <div class="infobox">
            <img src="{{ asset('img/new_image_3.jpg') }}" alt="No Internet" />

            <a target="_blank" rel="noreferrer" href="http://newlink3.com/">New Link 3</a>
            <p>I've recently completed this project. It was a great learning experience.</p>
        </div>

        <div class="infobox">
            <img src="{{ asset('img/new_image_4.jpg') }}" alt="No Internet" />

            <a target="_blank" rel="noreferrer" href="http://newlink4.com/">New Link 4</a>
            <p>This project is my latest achievement. I'm thrilled with the results!</p>
        </div>

        <div class="infobox">
            <img src="{{ asset('img/new_image_5.jpg') }}" alt="No Internet" />

            <a target="_blank" rel="noreferrer" href="http://newlink5.com/">New Link 5</a>
            <p>I've just finished working on this project. It's been a challenging but rewarding experience.</p>
        </div>

        <div class="infobox">
            <img src="{{ asset('img/new_image_6.jpg') }}" alt="No Internet" />

            <a target="_blank" rel="noreferrer" href="http://newlink6.com/">New Link 6</a>
            <p>This project was a collaboration with talented individuals. I'm proud of what we've accomplished.</p>
        </div>

        <div class="infobox">
            <img src="{{ asset('img/new_image_7.jpg') }}" alt="No Internet" />

            <a target="_blank" rel="noreferrer" href="http://newlink7.com/">New Link 7</a>
            <p>Working on this project was a great learning opportunity. I've gained valuable skills.</p>
        </div>

        <div class="infobox">
            <img src="{{ asset('img/new_image_8.jpg') }}" alt="No Internet" />

            <a target="_blank" rel="noreferrer" href="http://newlink8.com/">New Link 8</a>
            <p>This project challenged me to think outside the box. I'm proud of the innovative solutions we came up with.</p>
        </div>

        <div class="infobox">
            <img src="{{ asset('img/new_image_9.jpg') }}" alt="No Internet" />

            <a target="_blank" rel="noreferrer" href="http://newlink9.com/">New Link 9</a>
            <p>Creating this project was a fulfilling experience. I'm grateful for the opportunity.</p>
        </div>

        <div class="infobox">
            <img src="{{ asset('img/new_image_10.jpg') }}" alt="No Internet" />

            <a target="_blank" rel="noreferrer" href="http://newlink10.com/">New Link 10</a>
            <p>I've recently launched this project. Check it out!</p>
        </div>
    </div>

Flex容器的子元素默认带有flex-shrink: 1属性，当子元素总宽度超过容器宽度时，会自动收缩以适应容器空间，导致元素被挤压重叠，无法触发横向滚动。

给.infobox添加flex-shrink: 0，禁止子元素收缩，这样当子元素总宽度超过.mywork容器时，就会触发overflow-x: scroll实现横向滚动。修改后的.infobox代码如下：

.infobox {
    background-color: $seaLightYellow;
    border-radius: 30px;
    max-width: 450px;
    width: 450px;
    height: 400px;
    margin: 10px;
    text-align: center;
    flex-shrink: 0; // 添加这一行

    // 剩余样式保持不变
    img {
        width: 100%;
        border-radius: 25px 25px 0 0;
    }

    a {
        font-weight: bold;
        font-size: 30px;
        background: none;

        &:hover {
            color: rgba(0, 81, 255);
        }
    }

    p {
        background: none;
        border-radius: 30px;
        padding: 10px;
        font-size: 15px;
    }
}

另外，可给.mywork添加padding: 0 10px，避免滚动时第一个和最后一个.infobox的边缘贴到容器边框，优化视觉效果：

.mywork {
    margin: 10% auto;
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    border: 2px solid red;
    width: 95%;
    padding: 0 10px; // 添加这一行
}

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