一侧扩展包装

Question

我很好奇人们会如何处理这个问题，我已经有了解决方案，但我认为这不是很优雅。你们怎么会有一个包含内容的包装，但是一侧的背景颜色一直延伸到浏览器窗口的边缘？

我当前的解决方案是：：after用大宽度填充整个高度，然后将绝对位置正确地定位在右侧，但是这样做似乎很肮脏，还有其他解决方案吗？

我的上下文示例解决方案：

.container {
     background-color: grey;
     overflow: hidden;
    }
    
    .wrap {
     position: relative;
     margin-left: auto;
     margin-right: auto;
     background-color: green;
     border: 1px solid blue;
     max-width: 96%;
    }
    
    .wrap:after {
     content: '';
     position: absolute;
     top: 0;
     left: 100%;
     width: 2000px;
     height: 100%;
     background-color: green;
    }

    <div class="container">
      <div class="wrap">
        <p>Content in wrap</p>
      </div>
    </div>