flex布局中margin-right失效

问题：外层div设置flex布局，内层超过外层宽度的元素margin-right无效

<style>
	.container {
	    display: flex;
	    width: 200px;
	    background: #92b1e1;
	    overflow: auto;
	    background: blue;
	}
	.item {
		margin-right: 10px;
		background: red;
	}
</style>
<div class='container'>
	<div class='item'>item1</div>
	<div class='item'>item2</div>
	<div class='item'>item3</div>
	<div class='item'>item4</div>
</div>

效果如下：

修改之后：

<style>
	.container {
	    display: flex;
	    width: 200px;
	    background: #92b1e1;
	    overflow: auto;
	    background: blue;
	}
	.main {
		overflow: visible;
		display: flex;
	}
	.item {
		margin-right: 10px;
		background: red;
	}
</style>
<div class='container'>
	<div class="main">
		<div class='item'>item1</div>
		<div class='item'>item2</div>
		<div class='item'>item3</div>
		<div class='item'>item4</div>
	</div>
</div>

给内层列表套了一层div加了 overflow：visible； 就可以了