Как добиться нормального отображения теней при наличии скролла?

Question

[oneof89]

<style type="text/css">
.wrapper {
	width: 1000px;
	height: 300px;
	overflow-y: scroll;
}
.scroll {
	width: 2000px;
	height: 300px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.scroll > div {
	width: 300px;
	height: 300px;
	box-shadow: 0px 32px 88px rgb(247 85 35);
}
</style>
<div class="wrapper">
	<div class="scroll">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</div>
</div>
<button></button>
<button></button>

Пример моей проблемы. Из-за наличия скролла, тень блока обрезается. Как добиться нормального отображения тени?
Заодно подскажите, как к привязать к кнопкам скролл на определенное кол-во пикселей, чтоб это делать не вручную, а по клику?

Comments

[Ankhena]

Как добиться нормального отображения тени?

Задавать высоту обертки больше чем дети, чтобы тень поместилась.