如何通过屏幕溢出父级CSS定位绝对自动宽度

Question

我希望2元素.bg-gray和.bg-blue绝对位置依赖.container，但是其宽度可以根据窗口屏幕自动缩放。 当前.bg-gray和.bg-blue不能跨过.container的宽度。现在如何获得全屏宽度并自动随屏幕缩放？

谢谢大家！

HTML：

<div class="container">
    <div class="bg-grey"></div>
    <div class="bg-blue"></div>
</div>

CSS：

.container {
  width: 1084px;
  margin-right: auto;
  margin-left: auto;
  position: relative;
  height: 750px;
}

.bg-grey {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 600px;
  background: #C4C4C4;
  z-index: 1;
}

.bg-blue {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 750px;
  background: #2F7BAE;
  z-index: 0;
}

所需图片