潜在问题#1
最后一个边距没有折叠。它被忽视了。
The overflow属性仅适用于content。它不适用于填充或边距。
这是规范中的内容：
11.1.1 溢出：overflow财产 https://www.w3.org/TR/CSS22/visufx.html#overflow
该属性指定块容器元素的内容是否
当它溢出元素的框时被剪裁。
现在让我们看一下CSS 盒子模型 https://www.w3.org/TR/CSS22/box.html:
source: W3C https://www.w3.org/TR/CSS22/box.html
The overflow属性仅限于内容框区域。如果内容溢出其容器，则overflow适用。但overflow不会进入填充或边距区域（当然，除非后面有更多内容）。
潜在问题#2
潜在问题#1 的问题是它似乎在 Flex 或网格格式化上下文之外崩溃。例如，在标准块布局中，最后一个边距似乎不会折叠。所以也许overflow允许覆盖边距/填充，无论规范中有何规定。
div {
height: 150px;
overflow: auto;
width: 600px;
background: orange;
white-space: nowrap;
}
span {
background: blue;
color: #fff;
padding: 50px;
margin: 0 30px;
display: inline-block;
}
<div class="container">
<span>Item 1</span>
<span>Item 2</span>
<span>Item 3</span>
<span>Item 4</span>
</div>
因此，问题可能与“过度约束”的元素有关。
10.3.3 正常状态下的块级非替换元素
流动 https://www.w3.org/TR/CSS22/visudet.html#blockwidth
其他的使用值之间必须满足以下约束
特性：
margin-left + border-left-width + padding-left + width +
padding-right + border-right-width + margin-right= 宽度
包含块
If width is not auto and border-left-width + padding-left +
width + padding-right + border-right-width（加上任何margin-left or margin-right那些不是auto) 大于
包含块的宽度，然后是任何auto值margin-left or margin-right对于以下规则，被视为
为零。
如果以上所有的计算值都不是auto，这些值被称为“过度约束”，并且是使用的值之一
必须与其计算值不同。如果direction包含块的属性具有值ltr，指定的
的价值margin-right被忽略并计算该值，以便
使平等成为现实。如果值direction is rtl,
这发生在margin-left instead
（强调已添加）
所以，根据CSS 视觉格式化模型 https://www.w3.org/TR/CSS22/visudet.html，元素可能会“过度约束”，因此，右边距会被丢弃。
潜在的解决方法
使用右边代替边距或填充border在最后一个元素上：
li:last-child {
border-right: 30px solid orange;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
height: 100px; /* adjusted for demo */
overflow: auto;
width: 600px;
background: orange;
}
ul li {
background: blue;
color: #fff;
padding: 90px;
margin: 0 30px;
white-space: nowrap;
flex-basis: auto;
}
li:last-child {
border-right: 30px solid orange;
}
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
另一种解决方案使用伪元素而不是边距或填充。
Flex 容器上的伪元素呈现为 Flex 项目。容器中的第一项是::before最后一项是::after.
ul::after {
content: "";
flex: 0 0 30px;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
height: 100px; /* adjusted for demo */
overflow: auto;
width: 600px;
background: orange;
}
ul li {
margin: 0 30px;
background: blue;
color: #fff;
padding: 90px;
white-space: nowrap;
flex-basis: auto;
}
ul::after {
content: "";
flex: 0 0 30px;
}
ul::before {
content: "";
flex: 0 0 30px;
}
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
