Html 在div外水平扩展背景

我有一些css：

.note {
  background: red;
}

.note > div {
  max-width: 780px;
  margin: 0px auto;
  position: relative;
  padding-left: 20px;
  border: 1px solid black;
}

.note > div:before {
  content: '⚠';
  position: absolute;
  left: 0px;
}

以及相应的html，如：

<div class='note'><div>Foobar</div></div>

还有一些html：

<div id='container'>
  <p>Lorem ipsum</p>
  <div class="note"><div>foo</div></div>
  <p>Foobar</p>
</div>

同侧眼睑

福
福巴

当然，注意在这里不起作用（红线不会超出绿色容器）。我一直在想办法，但没办法。我不能只关闭容器，放置我的便笺，然后打开另一个，因为边界半径和（还有框阴影，但我在示例中忽略了它）会断裂。在

上使用负边距也不起作用，因为它会添加水平滚动条。我可以做
。注意
位置：绝对，但我的便条会与后面的内容重叠

有什么办法可以解决吗

更新：下面是一个例子。第二个版本是我真正想要的，只是它创建了一个垂直滚动条。第三个类似于Robert的解决方案，唯一的问题是它会使div停止流动，我希望避免像在下面的元素中添加边距顶部这样的黑客行为，因为我事先不知道票据的长度

.note {
  background: red;
    position: absolute;
    left:0;
    right:0;
}

下面是一个JSFIDLE：

注意，我更改了一些宽度，以便在JSFIDLE屏幕中更容易看到，但大小与此无关。还要注意的是，由于我将note div设置在正常流之外，因此需要为后面的任何内容添加一个适当的边距，否则它将落后于note div。一些泛型，如
。note+*{margin top:2em}
在某些情况下可以工作，但它将覆盖该元素上已经存在的任何边距顶部，在这种情况下，您需要一个更具体的修复程序，如
。注意+p{margin top:3em；}
jsfiddle，在这里显示：
您可以创建一个jsfiddle吗？肯定需要一个提琴，并且确保不要像您在上一段中提到的那样遗漏任何内容：）因此，如果我理解正确，你想让容器内的红线跨越视口宽度（或者仅仅是#容器宽度？），而不隐藏框阴影并保留边界半径吗？我添加了一个JSFIDLE。我希望div是视口宽度，如第三个示例中所示，只是它隐藏了部分内容。
.note {
  background: red;
    position: absolute;
    left:0;
    right:0;
}