CSS Flex布局如何实现滑块子元素水平并排排列

已尝试通过设置display: flex属性、修改.slider类宽度实现元素并排显示，但始终无法达成预期效果，无法定位代码中的错误位置。

现有实现代码 #

CSS 部分 #

.slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: red;
    height: 100vh;
    display: flex;
}

.slid {
    position: relative;
    width: 100%;
    height: 100vh;
}

.img-slid {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 35%;
    height: 50%;
    background-size: cover;
}

.engine {
    background-color:black;
}

.exhaust {
    background-color: grey;
}

.slid-text {
    position: absolute;
    top: 50%;
    left: 11%;
    transform: translateY(-50%);
    font-size: 8rem;
    text-transform: uppercase;
    color: #fff;
    font-family: 'Black Ops One', cursive;
}

.number-slaid {
    position: absolute;
    bottom: 8%;
    right: 8%;
    font-size: 2rem;
    color: #fff;
    font-family: 'Black Ops One', cursive;
}

.arrows-left {
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translateY(-50%) rotate(45deg);
}

.arrows-right {
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-50%) rotate(-135deg);
}

.arrow {
    width: 80px;
    height: 80px;
    border-left: 2px solid #000;
    border-bottom: 2px solid #000;
    cursor: pointer;
}

HTML 部分 #

<main>
    <section class="slider">
        <div class="slid">
            <div class="engine img-slid"> </div>
            <p class="slid-text">Silniki</p>
            <p class="number-slaid">01</p>
        </div>
        <div class="slid ">
            <div class="exhaust img-slid"></div>
            <p class="slid-text">Wydechy</p>
            <p class="number-slaid">02</p>
        </div>

        <div class="arrows-slider">
            <div class="arrows-left arrow"></div>
            <div class="arrows-right arrow"></div>
        </div>
    </section>
</main>

问题原因与修复方案 #

并排失效的核心问题有3个：

• 父容器.slider宽度仅为100%视口宽度，两个子项.slid都设置了width:100%，flex默认布局下子项总宽度超出父容器时没有设置收缩规则，无法实现并排
• 箭头容器.arrows-slider没有脱离文档流，作为flex子项会占用布局空间，挤压幻灯片宽度
• 父容器没有设置溢出隐藏，后续滑动时会出现横向滚动条

具体修改点 #

1. 给.slider增加overflow: hidden，隐藏超出容器的内容，避免横向滚动条
2. 将.slid的width: 100%替换为flex: 0 0 100%，强制每个幻灯片项的基准宽度为父容器的100%，既不收缩也不扩张，两个幻灯片项会自然横向并排，总宽度为父容器的200%
3. 给.arrows-slider增加绝对定位，使其脱离flex布局流，不占用幻灯片的布局空间，同时作为左右箭头的定位父级。

修改后的核心CSS代码：

.slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: red;
    height: 100vh;
    display: flex;
    overflow: hidden;
}

.slid {
    position: relative;
    flex: 0 0 100%;
    height: 100vh;
}

.arrows-slider {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

修改完成后两个幻灯片块会默认横向并排，后续只要给.slider添加过渡属性，通过修改transform: translateX()的偏移值就能实现左右滑动的轮播效果。

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