CSS实现sub-header溢出时，content匹配其宽度且背景全覆盖

方法1：添加包裹容器（推荐，兼容性优异） #

给.sub-header和.content外层新增一个包裹容器，比如：

<div class="content-wrapper">
  <div class="sub-header">...</div>
  <div class="content">...</div>
</div>

然后给这个包裹容器设置CSS：

.content-wrapper {
  display: inline-grid;
  grid-template-columns: minmax(100%, fit-content);
  width: 100%;
}

.sub-header保留原有的width: fit-content; min-width: 100%;即可，.content无需额外设置宽度——容器会自动根据.sub-header的实际内容宽度调整，.content会继承容器宽度，确保两者背景都能完整覆盖内容且宽度完全匹配。

方法2：不修改HTML结构，用表格布局适配 #

如果无法新增HTML结构，直接修改两个元素的CSS：

.sub-header {
  width: fit-content;
  min-width: 100%;
  display: table;
}

.content {
  display: table-caption;
  caption-side: bottom;
  width: auto; /* 重置默认的100%宽度 */
}

原理：display: table让.sub-header的宽度由内容决定（配合min-width:100%保证窄内容时占满父容器），而table-caption元素的宽度会自动匹配对应table的宽度，caption-side: bottom确保.content位于.sub-header下方，完全复刻原有布局结构。

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