如何设置深度嵌套HTML元素宽度且不忽略body边距

不需要修改任何外层div的样式，直接给最内层的目标div加下面这几行CSS就行：

.inner-most {
  /* 拉伸填满可用宽度，兼容外层容器收缩到内容宽度的场景 */
  width: -webkit-fill-available;
  width: -moz-available;
  width: stretch;
  /* 这里替换成你需要的最大宽度值即可 */
  max-width: 768px;
  /* 屏幕宽度超过最大宽度时自动居中 */
  margin-inline: auto;
  /* 保证内边距、边框不会把元素撑宽 */
  box-sizing: border-box;
}

方案说明 #

• 完全不需要改动外层嵌套元素的样式，不管外层div是默认块级状态，还是因为其他业务样式触发了内容收缩（比如设了inline-block、浮动、作为flex子项等），这个属性都能让最内层div拉伸到当前布局上下文的可用宽度，在你给出的代码场景里就是刚好撑满body的内容区，自动扣除body的8px外边距，不会溢出。
• 不会有100vw的通病：100vw计算时会把纵向滚动条的宽度算进去，也不会识别body的margin，很容易出现横向滚动条、左右边距不对的问题，这个方案是基于实际布局可用宽度计算的，没有这个问题。
• 可以直接设置max-width，屏幕宽度超过你设的最大值时，元素会自动居中，不需要额外写计算逻辑。

其他方案的缺陷 #

• 给最内层设width: 100%：如果外层div是内容撑开宽度的状态，父子元素的宽度计算会形成循环依赖，最后元素只会收缩到内容宽度，撑不满可用区域。
• 给所有外层div加width: 100%：侵入性太强，后续如果外层div有其他布局需求很容易冲突，维护成本高。
• 用calc(100vw - 16px)手动算边距：硬编码边距值，后续如果改了body的margin还要同步改这里，而且还是解决不了100vw包含滚动条宽度的问题。

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