overflow scroll hides margin on right side

Question

There's an outer div with an inner div. The inner div is wider than the outer div and the outer div has overflow set to scroll. The inner div has margin on both the left and right side, but the scroll of the outer div stops before you can see the margin on the right side (the margin on the left is visible). How do you get the scroll of the outer div to respect the entire width of the inner div (including the margins)?

#outer, #inner {
	height: 200px;
}

#outer {
	width: 400px;
	overflow: scroll;
	border: 2px solid red;
}

#inner {
	width: 800px;
	margin: 0 20px;
	background-color: blue;
}

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

Answer 1

Adding display: inline-block on #inner will display margins on both sides.

JS Bin