如何让内层div超出父容器且自动遵循body的padding（无需手动计算）

我的页面结构如下：

<body>
    <div class="outer">
        Some text
        <div class="inner">
            More text
        </div>
    </div>
</body>

外层<div>通过max-width限制尺寸，我需要内层<div>宽度为父元素的150%，向右超出父容器；但浏览器窗口较窄时，要限制内层<div>的宽度，使其遵循<body>元素的padding规则。

当前实现能达到以下效果：

• 浏览器窗口极宽时，橙色内层盒子宽度为碧绿色外层盒子的150%；
• 窗口稍窄时，橙色盒子自动收缩，右边缘与浏览器窗口右边缘保持100px距离（与<body>的padding值一致）；
• 窗口极窄时，碧绿色盒子延伸至窗口右边缘，橙色盒子同步延伸到该边缘。

但现有方案需要手动计算<body>和外层<div>的padding、border、margin数值，维护成本极高。有没有更简便的实现方式，只需告诉内层<div>“超出父容器，但遵循<body>的padding规则”即可？

现有实现代码 #

CSS #

* {
  padding: 0;
  margin: 0;
}
body {
  padding: 100px;
}
.outer {
  padding: 80px;
  border: 10px solid black;
  max-width: 600px;
  background-color: aquamarine;
}
.inner {
  background-color: orange;
  width: 150%;
  /*
            max-width = (viewport width)
                        - 2 * (body padding)
                        - 1 * (.outer border)
                        - 1 * (.outer padding)
            I'm trying to avoid this manual calculation
            */
  max-width: calc(100vw - 290px);
}

HTML #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div class="outer">
    This element has a max width of 600px.
    <div class="inner">
      This element should be 150% the width of its parent, unless doing so causes it to overflow, in which case it should be as big as possible while still obeying the padding on the body. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam, aperiam
      excepturi accusantium neque dolores consequatur hic repellendus doloribus inventore dolore fugit ipsum minima nostrum rerum. Id possimus voluptates ipsam rem.
    </div>
  </div>
</body>
</html>

优化方案 #

方案1：使用CSS变量+min()函数（推荐） #

通过CSS自定义属性统一管理所有尺寸变量，避免手动计算；同时用min()函数直接实现“取150%父宽与body可用宽度较小值”的逻辑，代码更易维护。

修改后的CSS代码：

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
/* 全局变量统一管理尺寸，后续修改只需调整此处 */
:root {
  --body-padding: 100px;
  --outer-padding: 80px;
  --outer-border-width: 10px;
}
body {
  padding: var(--body-padding);
}
.outer {
  padding: var(--outer-padding);
  border: var(--outer-border-width) solid black;
  max-width: 600px;
  background-color: aquamarine;
}
.inner {
  background-color: orange;
  /* 自动取150%父宽 和 视口宽度减去两倍body padding的较小值 */
  width: min(150%, 100vw - 2 * var(--body-padding));
}

优势：

• 所有尺寸集中管理，修改时无需重新计算；
• min()函数直接实现需求逻辑，代码简洁直观；
• box-sizing: border-box确保元素宽度计算包含border和padding，避免尺寸偏差。

方案2：利用绝对定位（无需计算父元素尺寸） #

如果不想依赖父元素的尺寸变量，可以给外层盒子设置position: relative，内层盒子用绝对定位左右对齐，同时限制最大宽度为150%父宽：

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  padding: 100px;
}
.outer {
  position: relative;
  padding: 80px;
  border: 10px solid black;
  max-width: 600px;
  background-color: aquamarine;
}
.inner {
  position: absolute;
  left: var(--outer-padding); /* 与outer的padding-left一致 */
  right: calc(var(--body-padding) - var(--outer-padding) - var(--outer-border-width));
  background-color: orange;
  max-width: 150%;
  width: auto;
}

不过这个方案仍需少量变量关联，但无需计算视口相关数值，适合特定场景。

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