如何用CSS让嵌套DIV宽度基于祖父级DIV尺寸设置？

先看你的HTML结构：

<div id="outer">
  <div id="inner">
    <div id="nested">
    </div>
  </div>
</div>

答案是完全可以，给你两种实用的实现方法：

方法一：利用绝对定位突破父级限制 #

默认情况下，元素的百分比宽度是相对于直接父元素（也就是这里的#inner）计算的，要让#nested的宽度基于#outer，只需要给#outer设置相对定位，把它变成绝对定位元素的参考容器：

#outer {
  width: 80vw; /* 示例：设为窗口宽度的80% */
  position: relative; /* 关键：开启相对定位，成为绝对定位的参考 */
  border: 1px solid red;
}

#inner {
  width: 70%; /* 保持比#outer小 */
  border: 1px solid blue;
}

#nested {
  position: absolute; /* 脱离文档流，参考#outer计算宽度 */
  width: 90%; /* 这个百分比对应#outer宽度的90% */
  height: 50px;
  background: green;
}

注意：绝对定位会让#nested脱离正常文档流，如果需要它留在文档流里，可以用下面的方法。

方法二：使用CSS变量传递宽度比例 #

通过CSS变量把#outer的宽度规则传递给#nested，不用修改元素定位：

#outer {
  --outer-width: 80vw; /* 定义变量存储#outer的宽度 */
  width: var(--outer-width);
  border: 1px solid red;
}

#inner {
  width: 70%;
  border: 1px solid blue;
}

#nested {
  width: calc(var(--outer-width) * 0.9); /* 直接计算：#outer宽度的90% */
  height: 50px;
  background: green;
}

如果#outer的宽度是基于父容器的百分比（比如width: 70%），也可以把变量设为百分比：

#outer {
  --outer-percent: 70%;
  width: var(--outer-percent);
}

#nested {
  width: calc(var(--outer-percent) * 0.9);
}

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