仅用CSS实现超出父元素及页面范围的Slider可行吗？

完全可以实现你要的效果，核心是调整Slider容器的宽度规则和滚动条的归属，以下是修改后的代码和原理说明：

修改后的完整代码 #

CSS部分 #

h2{
  text-align: center;
}

.container{
  margin: 0 auto;
  max-width:460px;
  border: 2px solid #ef34ed;
  overflow: visible; /* 允许内容溢出容器边框 */
}

.row {
  overflow-x: scroll; /* 滚动条绑定在row上，宽度与container一致 */
}

.slider{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: max-content; /* Slider宽度由内部所有slide总宽度决定，不受父元素限制 */
}

.slide + .slide {
  margin-left: 50px;
}

.slide{
  text-align: center;
  flex-shrink: 0; /* 防止slide被flex容器压缩变形 */
}

HTML部分 #

<div class="section">
  <div class="container">
    <div class="row">
      <h2>Some title</h2>
      <div class="slider">
        <div class="slide">
          <img src="https://via.placeholder.com/150" alt="person" />
        </div>

        <div class="slide">
          <img src="https://via.placeholder.com/150" alt="person" />
        </div>
        
        <div class="slide">
          <img src="https://via.placeholder.com/150" alt="person" />
        </div>
        
        <div class="slide">
          <img src="https://via.placeholder.com/150" alt="person" />
          <p>Name</p>
        </div>
        
        <div class="slide">
          <img src="https://via.placeholder.com/150" alt="person" />
          <p>Name</p>
        </div>

        <div class="slide">
          <img src="https://via.placeholder.com/150" alt="person" />
          <p>Name</p>
        </div>

        <div class="slide">
          <img src="https://via.placeholder.com/150" alt="person" />
        </div>
        
        <div class="slide">
          <img src="https://via.placeholder.com/150" alt="person" />
        </div>

        <div class="slide">
          <img src="https://via.placeholder.com/150" alt="person" />
        </div>
        
      </div>
      
      <p>
      Magna phaedrum electram pro an. Te nec delectus temporibus, omittantur ullamcorper ne pri. Pri ad affert urbanitas, laboramus eloquentiam pri ad. Purto summo interpretaris eam et, brute dolore ut eam, illud dolore putent et vim. Ei sed aliquip iudicabit, te fabulas menandri sed.

      </p>
    </div>
  </div>
</div>

关键修改点说明 #

1. 滚动条容器转移：把overflow-x: scroll从.slider移到.row上，这样滚动条的宽度会和.container保持一致，符合你的需求。
2. Slider宽度自适应内容：给.slider设置width: max-content，让它的宽度完全由内部所有slide的总宽度决定，不再受父元素.row的宽度限制，这样slide就能轻松溢出.container甚至页面范围。
3. 防止slide变形：给.slide添加flex-shrink: 0，避免在flex布局中slide被压缩，保证每个slide的尺寸稳定。
4. 允许容器溢出：给.container设置overflow: visible，确保溢出的slide不会被容器边框截断。

效果就是：slide会超出container的紫色边框，甚至延伸到页面外部，拖动row底部的滚动条就能查看所有slide，滚动条宽度始终和container保持一致。

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