为何overflow-x: hidden;无法隐藏轮播图的横向溢出？

开发图片轮播组件时，希望防止横向溢出，避免页面刷新时内容向右挤压。已为.slideshow类添加overflow-x: hidden;属性，但未达到预期效果，页面仍出现横向滚动条。

HTML代码 #

<section class="slideshow">
 <div class="sliders">
    <div class="slides">
        <!--Radio Button Start-->
        <input type="radio" name="radio-btn" id="radio1">
        <input type="radio" name="radio-btn" id="radio2">
        <input type="radio" name="radio-btn" id="radio3">
        <input type="radio" name="radio-btn" id="radio4"> 
        <!--Radio Button End-->

        <!--Image Start-->
        <div class="slide first">
            <img src="/images/landing.jpg"> 
        </div>
        <div class="slide">
            <img src="/images/pexels-photo-15408977.jpeg"> 
        </div>
        <div class="slide">
            <img src="/images/pexels-photo-443383.jpeg"> 
        </div>
        <div class="slide">
            <img src="/images/pool.jpg"> 
        </div> 
        <!--Image End-->

        <!--Automatic Navigation Start-->
        <div class="navigation-auto">
            <div class="auto-btn-1"></div>
            <div class="auto-btn-2"></div>
            <div class="auto-btn-3"></div>
            <div class="auto-btn-4"></div>
        </div> 
        <!--Automatic Navigation End-->
    </div>
        <!--Manual Navigation Start-->
        <div class="navigation-manual">
            <label for="radio1" class="manual-btn"></label>
            <label for="radio2" class="manual-btn"></label>
            <label for="radio3" class="manual-btn"></label>
            <label for="radio4" class="manual-btn"></label>
        </div>
        <!--Manual Navigation End-->
         <div class="landing-page">
            <img id="logo" src="/images/Watts Investment Group LLC.png">
            <p>Watts Investment Group LLC.</p>
            <h3>DISCOVER HIGH-VALUE COMMERCIAL PROPERTIES</h3>
            <div class="social">
                <ul class="socials">
                    <a href="#"><li><i class="fa-brands fa-instagram"></i></li></a>
                    <a href="#"><li><i class="fa-brands fa-facebook"></i></li></a>
                    <a href="#"><li><i class="fa-brands fa-linkedin"></i></li></a>
                    <a href="#"><li><i class="fa-brands fa-twitter"></i></li></a>
                </ul>
            </div>
        </div>
    </div> 
<!--Images Slider End-->
 </section>

CSS代码（原始） #

.slideshow {
    height: 100vh;
    overflow-x: hidden;
}

.slider {
    width: 100%;
    border-radius: 20px;
}

.slides {
    width: 500%;
    height: 500px;
    display: flex;
    position: absolute;
    left: 80px;
 }

.slides input {
    display: none;
}

.slide {
    width: 20%;
    transition: 4s;
}

.slide img {
    position: absolute;
    z-index: 1;
    width: 1300px;
    height: 720px;
    border-radius: 10px;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.653)) brightness(55%);
}

问题根源 #

1. 绝对定位脱离文档流：.slides和.slide img都使用了position: absolute，但.slideshow没有设置position: relative，导致这些绝对定位元素以视口为基准定位，而非.slideshow容器，因此.slideshow的overflow-x: hidden无法约束它们的溢出。
2. 固定宽度导致溢出：.slide img设置了固定宽度1300px，在小于1300px的屏幕上必然超出视口；.slides设置width: 500%且left: 80px，进一步扩大了横向占用空间。
3. 容器未约束尺寸：.slideshow仅设置了height: 100vh，未明确width: 100%，无法确保容器占满视口宽度。

修复方案 #

关键调整步骤： #

• 给.slideshow添加position: relative，让内部绝对定位元素以它为参考容器，激活overflow-x: hidden的约束效果。
• 重置.slides的left为0，调整宽度为400%（对应4个slide，每个占25%），改用transform: translateX()实现轮播位移（比修改left更流畅）。
• 将.slide img的固定宽度改为width: 100%，配合object-fit: cover保证图片自适应容器且比例不变。
• 给.sliders添加position: relative和height: 100%，确保轮播区域占满.slideshow的高度。

修改后的CSS示例： #

.slideshow {
    height: 100vh;
    overflow-x: hidden;
    position: relative; /* 核心：让内部绝对定位元素以该容器为基准 */
    width: 100%; /* 确保容器占满视口宽度 */
}

.sliders {
    width: 100%;
    height: 100%;
    position: relative; /* 作为.slides的定位容器 */
}

.slides {
    width: 400%; /* 4个slide，每个25%，总宽度400% */
    height: 100%;
    display: flex;
    position: absolute;
    left: 0; /* 初始位置对齐容器 */
    transition: transform 0.4s ease; /* 用transform实现平滑位移 */
}

.slide {
    width: 25%; /* 每个slide占总宽度的25% */
}

.slide img {
    width: 100%; /* 自适应容器宽度 */
    height: 100%;
    object-fit: cover; /* 保持图片比例，覆盖容器 */
    border-radius: 10px;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.653)) brightness(55%);
}

/* 单选按钮选中时的位移逻辑 */
#radio1:checked ~ .slides {
    transform: translateX(0);
}
#radio2:checked ~ .slides {
    transform: translateX(-25%);
}
#radio3:checked ~ .slides {
    transform: translateX(-50%);
}
#radio4:checked ~ .slides {
    transform: translateX(-75%);
}

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