Slider that overflows parent and page - CSS only - css

Question

Is is possible to create a slider that would "overflow" parent elements and body?
The idea would be to have content of section inside a container.
Slider would also be a part of that section but the slides would overflow parent element and body.
Vertical scroll would be wide as container but you could see slides outside of the container.
h2{
text-align: center;
}
.container{
margin: 0 auto;
max-width:460px;
border: 2px solid #ef34ed
}
.slider{
display: flex;
align-items: center;
jusify-content: flex-start;
overflow-x: scroll;
}
.slide + .slide {
margin-left: 50px;
}
.slide{
text-align: center;
}
<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>

Answer 1

Hope this is what you are looking for.
h2{
text-align: center;
}
.container{
margin: 0 auto;
max-width:460px;
border: 2px solid #ef34ed;
overflow: visible;
}
.slider{
display: flex;
align-items: center;
justify-content: flex-start;
overflow-x: scroll;
padding:0 calc(calc(100vw - 460px)*0.5);
margin:0 calc(calc(100vw - 460px)*-0.5);
}
.slide + .slide {
margin-left: 50px;
}
.slide{
text-align: center;
}
<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>