缩小浏览器窗口宽度后嵌套div丢失背景色

html和css如下:

<div class="outside">
    <div class="inside"></div>
</div>

.outside{
  width:100%;
  height:50px;
  background-color:blue;
}
.inside{
  width:980px;
  height:100%;
  margin:0 auto;
}

内部的div不设置背景色，这样把浏览器窗口拉窄直到出现横向滚动条，
然后把横向滚动条向右拉，超出视口的部分丢失了背景色：

恢复窗口大小背景色又会回来，IE，chrome,FF都这样，
但是在inside上设置同样的背景色可以避免出现这样的情况，

用响应式，设overflow:hidden等方法的网页不会出现横向滚动条，
或者大家浏览网页时一般都是去调整窗口大小，而不是拖动横向滚动条，
就无需担心这样的问题，不过发现了这种情况真的很抓狂！这算不算bug？

然后我查看了一下其他的网站，发现也有这种情况！

图灵社区：