如何使子元素比其父元素 div 宽，但又不填满整个浏览器宽度并响应？

Question

我使用负边距使子元素（.alignwide 宽度 = 1000 像素）比其父元素 div（.wrapper 宽度 = 800 像素）宽，但我不希望它填满整个浏览器宽度。这是我正在使用的代码：

HTML:

<div class="wrapper">
    <div class="alignwide">
        This div expands beyond .wrapper parent margins. 
    <div>
</div>

CSS:

.wrapper {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}

.alignwide {
    margin-left: calc((100% - 1000px) / 2);
    margin-right: calc((100% - 1000px) / 2);
    width: auto;
}

如果浏览器 window 宽度大于 1000px，这会起作用，但是当我将其调整为小于 1000px 时，.alignwide div 没有响应并且其内容得到裁剪。有没有办法在减小浏览器宽度时使 .alignwide div 变窄？

更新： 我正在添加两个屏幕截图，显示我正在寻找的行为：

当浏览器宽度大于1000px时：

当浏览器宽度小于1000px时：

提前致谢

Answer 1

使用min()取1000px和屏幕宽度(100vw)之间的最小值。我正在使用 margin-inline，它与 shorthand 的 left/right 边距相同。

.wrapper {
  max-width: 800px;
  margin:auto;
}

.alignwide {
  margin-inline: calc((100% - min(100vw,1000px)) / 2);
  background: red;
}

<div class="wrapper">
  <div class="alignwide">
    This div expands beyond .wrapper parent margins.
  </div>
</div>

如何使子元素比其父元素 div 宽，但又不填满整个浏览器宽度并响应？

How to make a child element wider than its parent div, but not fill the entire browser width and be responsive?

html

css

margin

responsive-design