在容器元素中打开滚动时，忽略向右填充

Question

我有以下HTML代码：

<div class="outer">
    <div class="inner"></div>
</div>

.outer div的scroll:auto和padding-left和padding-right设置为30px；

如果运行以下代码段，则可以看到如何应用padding-left（灰色），但是，水平滚动时，将不再应用padding-right。

.outer {
	position: absolute;
	top: 50%;
	left: 50%;
	
	width: 300px;
	height: 50px;
	
	transform: translate(-50%, -50%);
	
	border: 1px solid black;
	overflow:scroll;
	background-color: grey;
	
	padding-left: 30px;
	padding-right: 30px;
}

.inner {
	position: relative;
	height: 100%;
	width: 500px;
	background-color: white;
}

<div style="text-align: center">Scroll the containers (left to right)</div>

<div class="outer">
	<div class="inner"></div>
</div>

有人知道为什么会这样吗？您可以在此处找到演示