如何使子元素比其父 div 寬，但不填滿整個瀏覽器寬度並響應？

Question

我使用負邊距使子元素（ .alignwide ，width = 1000px）比其父 div（ .wrapper ，width = 800px）寬，但我不希望它填滿整個瀏覽器寬度。 這是我正在使用的代碼：

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 ，它是左/右邊距的簡寫。

 .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>