sdfsdf
sdfsdf

Reputation: 5610

overflow scroll hides margin on right side

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>

Upvotes: 2

Views: 1736

Answers (1)

Daniel
Daniel

Reputation: 800

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

JS Bin

Upvotes: 2

Related Questions