オーバーフロースクロールが右側に余白を表示しない

Question

内側のdivを持つ外側のdivがあります。内側のdivは外側のdivよりも広く、外側のdivはオーバーフローしてスクロールするように設定されています。内側のdivは左右両方にマージンを持っていますが、外側のdivのスクロールは停止してから、右側のマージンが見えます（左側の余白が見えます）。内側のdivの全幅（余白を含む）を尊重するために、外側のdivのスクロールをどのように取得しますか？

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

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

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

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

Answer 1

#innerにdisplay: inline-blockを追加すると、両側の余白を表示します。

JS Bin