我能想到五种可能实现目标的方法：
1.对内部元素使用负边距可将其移到父元素之外
1.使用Javascript将内部元素移到父元素之外。
1.更改源代码并将内部元素移到父级之外。
1.在内部元素上使用position: fixed。这将允许内部元素断开，但有一个缺点，即元素将固定在给定的位置（永远不会移动）。
1.从父元素中删除position: relative;或为父元素指定position: static

您可以尝试将overflow:visible添加到父div，然后使子overflow:visible比父div宽。

position:static的父项，position:absolute的子项或
position:relative的父项，position:fixed的子项（固定，永不向下移动）
您的left: 0; right:0;适用于这两种解决方案，只需注意，无论div的display属性设置为什么，您的子div都将在代码中位于其下方的任何div之上绘制。（simple example in jsfiddle），或者下面的另一个div，它具有与子元素（a much more elaborate example in codepen）相同的高度行为，这可能不是理想的，但是在简单的html/css中可以工作。

上面的答案都没有提到最好的方法，在全宽度容器上使用position:relative，在任何集中/偏移div内部的div内部使用position:absolute;left:0;width:100%;，只要没有其他容器声明position：relative，这就可以工作。

我曾经有一个案例，我需要制作一个carousel，并让它在父元素之外 Package 。您可以将子元素设置为width: 100vw，并将父元素设置为具有特定像素量的最大宽度......或计算量。通过这种设置，我们的子组件将自己扩展到父元素之外。JSFiddle

.parent {
     // our parent container has 20px margins on each side so we set its max width accordingly
      max-width: calc(100vw - 20px)
    }

    .child {
      // set the child to wrap the entire viewport width. Account for any margins from the parent and offset them with a negative margin
      width: 100vw;
      transform: translateX(-20px);
    }

即使这是10岁，它仍然是第一件事出现时，我正在寻找一个答案。我想别人可以使用的解决方案，我最终使用：

.parent {
  background-color: purple;
  max-width: 80vw;
  margin: auto;
  height: 500px
}
.child {
  width: 100vw; 
  margin-left: calc((-100vw + 100%) / 2);
  margin-right: calc((-100vw + 100%) / 2);
  background-color: green;
}

<div class='parent'>
<div class='child'>I've outgrown my parent</div>
<div>

父容器上的设置只是一个例子，子容器有100的视区宽度和负边距，然后计算容器（父容器）和视区的宽度差，并将其除以2，这样它就平均分布在左右边距上。