幅95%、overflow-x:scrollのdivの中に幅100%のtableを入れると隙間？ができる

###発生している問題・エラーメッセージ
以下のコードをメモ帳に書いてhtmlで保存してIEで開くと図１のような表示になります。

html
1<div style="width:95%;overflow-x:scroll;">
2	<table style="width:100%;border:solid 1px;white-space:nowrap;box-sizing: border-box;">
3		<tr><td>あいうあいうあいうあいうあいうあいうあいうあいうあいうあいうあいうあいうあいうあいうあいうあいうあいうあいうあいう</td><td>えお</td></tr>
4	</table>
5<div>

図１

この状態でスクロールバーを動かしても何もおきないのですが、理想としては表示をスクロール不可の薄い灰色の状態にしておいて、小さくしたときのみスクロールバーをスクロール可能な状態にしたいです。
tableのwidhtを「calc(100% - 2px)」にするとスクロール不可の状態になるので、両脇に1px分のスペースができているのだと思うのですが原因が分かりません。

Chromeだと思い通りの表示になっているのですがIEだとどうしてもうまくいきません。
ブラウザの横幅を大きくしたり小さくしたりと変更し続けていると稀に薄い灰色になるのですがそこから大きさを変えるとまた図１の状態になってしまいます。
paddingやmarginを0にしてみたのですが何も変わらないので困っています。
IEの仕様なのでしょうか。こうなる原因と理想通りの動きにするための方法が知りたいです。

行動規範の内容に同意します

回答1件

overflowの解釈の違いによって起きているのではないかと思います。
divに対してoverflow-x: autoを指定してあげるとIEでも正しく表示されるのではないでしょうか。

html
1<div style="width:95%;overflow-x:auto;">
2    <table style="width:100%;border:solid 1px;white-space:nowrap;box-sizing: border-box;">
3        <tr><td>あいうあいうあいうあいうあいうあいうあいうあいうあいうあいうあいうあいうあいうあいうあいうあいうあいうあいうあいう</td><td>えお</td></tr>
4    </table>
5<div>