如何让Flexbox中.cover元素宽度匹配溢出容器的.scrl_can？

以下几种CSS方案可以实现让.cover的宽度与.scrl_can保持一致，适配其随用户输入变化的宽度：

方法一：CSS Grid 布局（纯CSS，推荐） #

利用Grid布局的轨道特性，让.scrl_can和.cover处于同一网格轨道，轨道宽度会自动匹配最宽子元素（即.scrl_can）的宽度，无需额外JS：

.prnt {
  display: grid;
}

.scrl_can, .cover {
  grid-column: 1; /* 两个元素共享同一列 */
  grid-row: 1; /* 重叠在同一行，实现线条覆盖效果 */
}

/* 保留.scrl_can原有样式，比如横向滚动 */
.scrl_can {
  overflow-x: auto;
}

.cover {
  height: 2px;
  background-color: blue;
  align-self: end; /* 可调整线条位置，比如放在底部 */
}

这个方案不会影响.prnt外的定位元素，也不会触发overflow截断，完全通过CSS同步宽度。

方法二：Flexbox 结合 width: fit-content #

让父容器.prnt的宽度自适应.scrl_can的内容宽度，再让.cover继承这个宽度：

.prnt {
  display: inline-flex;
  flex-direction: column;
  width: fit-content; /* 宽度匹配内部最宽元素 */
}

.cover {
  width: 100%; /* 此时100%对应.scrl_can的内容宽度 */
  height: 2px;
  background-color: blue;
}

如果.prnt需要被包裹在固定宽度的容器中，这个方案依然有效，因为.prnt会随.scrl_can的宽度横向溢出，不会截断外部定位元素。

方法三：CSS变量 + JavaScript 动态同步 #

如果纯CSS方案无法满足复杂场景（比如.scrl_can宽度变化由异步内容加载触发），可以用CSS变量配合JS监听宽度变化：

.prnt {
  --scrl-can-width: auto;
}

.cover {
  width: var(--scrl-can-width);
  height: 2px;
  background-color: blue;
}

const scrlCan = document.querySelector('.scrl_can');
const prnt = document.querySelector('.prnt');

// 更新宽度变量的函数
function syncCoverWidth() {
  prnt.style.setProperty('--scrl-can-width', `${scrlCan.offsetWidth}px`);
}

// 初始化执行
syncCoverWidth();

// 监听用户输入导致的内容变化（根据实际事件类型调整）
document.addEventListener('input', syncCoverWidth);
// 可选：监听窗口 resize
window.addEventListener('resize', syncCoverWidth);

这个方法灵活性最高，能应对各种动态宽度变化场景。

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