如何实现Div仅向右侧超出父容器延伸至浏览器边缘？

问题 #

需要实现一个div从父容器左侧开始，向右延伸至浏览器边缘的效果。原方案在父容器使用百分比宽度（60%）时有效，但将父容器max-width修改为更小的值（如360px）后失效，优先采用纯CSS方案。

纯CSS实现代码 #

CSS部分 #

body {
  margin: 0;
  padding: 0;
  color: white;
  background: grey;
}

.center {
  width: 60%;
  max-width: 360px; /* 可按需调整此值 */
  margin: 0 auto;
  background: red;
  position: relative; /* 设置为绝对定位的参考容器 */
}

.image-container {
  position: absolute;
  left: 0; /* 与父容器左侧对齐 */
  right: calc(-100vw + 100%); /* 核心计算：让右侧延伸至浏览器边缘 */
  height: 300px;
  background-image: url("https://picsum.photos/1200/400");
  background-size: cover;
  background-position: center;
}

/* 修复绝对定位导致的内容重叠问题 */
.center > p:nth-of-type(4) {
  margin-top: 320px;
}

HTML部分 #

<div class="container">
  <div class="center">
    <p>Banner image should start where the text starts and extend beyond the parent container all the way to the edge of the browser.</p>
    <p>Width set to 60%.</p>
    <p>Change the max-width and it no longer works.</p>
    <div class="image-container"></div>
    <p>More content after that stuff above.</p>
    <p>More content after that stuff above.</p>
    <p>More content after that stuff above.</p>
  </div>
</div>

原理说明 #

1. 给父容器.center添加position: relative，使子元素的绝对定位以此容器为参考基准。
2. left: 0确保图片左侧与父容器左侧完全对齐。
3. right: calc(-100vw + 100%)是实现右侧延伸的核心：
   • -100vw将元素右边界拉至视口左边缘
   • 加上100%（父容器的实际宽度）后，右边界会自动延伸至视口右边缘
4. 由于绝对定位元素脱离文档流，需给后续内容添加margin-top避免被图片覆盖。

内容的提问来源于stack exchange，提问作者RobertN