溢出-x：自动，不隐藏内容答案

【问题标题】：Overflow-x: auto, without hiding content溢出-x：自动，不隐藏内容
【发布时间】：2022-08-24 20:47:51
【问题描述】：

我刚刚制作了这部分图像，您应该在其中水平滚动以查看不同的图像，并且通过以下屏幕截图的外观，这在视觉上几乎是我想要的结果，只是对样式进行了一些更改来

Section without overflow applied: the result I wanted

但是，当我应用 overflow-x: auto 时，为了允许水平滚动，该部分会切断右侧的图像：

Section with overflow applied: NOT the result I wanted

如何使部分水平滚动但不切断右侧的图像？

到目前为止，它基本上是一个包含三个图像的 flexboxed 部分：

<section class=\"projectSlideshow\">
    <img 1>
    <img 2>
    <img 3>
</section>

.projectSlideshow {
display: flex;
flex-direction: row;
height: 75vh;
margin-bottom: 2.25rem;
}

看起来您在右侧设置了填充或边距。
我试着做这样的事情，你应该在项目幻灯片中添加溢出自动它应该可以工作
像这样的东西？ link
@OMiShah，我每边确实有大约 9rem 边距。只是想像在第一个屏幕截图上那样覆盖这些边距，当我应用它时，overflow-x 不会这样做。它只是切断了内容。
是的，类似的东西，@Jayr

标签： html css

【解决方案1】：

哦，好吧，有时，您正在寻找的解决方案是如此简单，以至于您甚至都没有想到。

我通过将<section class="projectSlideshow></section> 放在我的<div class="content"></div> 之外解决了它（其中包含幻灯片上方和下方的文本，它使用填充来推入文本（该部分最初位于其中）），使它们成为兄弟姐妹彼此，而不是 div 的子部分。

将<section>> 放在<div> 之外使得幻灯片可以从一个边框转到另一个边框（100% 宽度）。然后就向第一张图像添加相同的 margin-left 以及向最后一张图像添加相同的 margin-right 作为文本的填充给出了我想要的确切结果。

A quick video of the result。

【讨论】：