如何让宽度百分比基于溢出Flexbox容器的实际滚动宽度

核心问题是你当前的百分比计算基准是滚动容器的可视宽度，而非内容的实际总宽度。通过调整容器结构和宽度规则，就能让百分比基于真实内容宽度计算，无需JS。

解决方案步骤： #

1. 重构容器层级

   • 外层容器仅负责横向滚动，移除min-width:300px这类强制宽度规则
   • 内层容器承载表头和任务行，用width: max-content让它的宽度由内部内容自然撑开

2. 统一表头与任务行的布局基准

   • 表头和每个任务行使用相同的列宽规则（比如固定列宽或统一的网格模板），确保两者总宽度完全一致
   • 任务条的百分比计算将基于内层容器的实际总宽度，而非外层滚动容器的可视宽度

示例代码： #

/* 外层滚动容器：仅处理滚动，不限制宽度 */
.gantt-scroll-wrapper {
  overflow-x: auto;
}

/* 内层内容容器：宽度由表头总宽度决定 */
.gantt-content {
  width: max-content;
  display: grid;
  /* 假设每个月份列宽100px，根据实际需求调整 */
  grid-template-columns: repeat(12, 100px);
}

/* 表头单元格：固定宽度，与任务行列宽匹配 */
.gantt-header-cell {
  padding: 8px;
  text-align: center;
  border: 1px solid #e0e0e0;
}

/* 任务行容器：继承内层容器的宽度，作为任务条的基准 */
.gantt-task-row {
  position: relative;
  height: 40px;
  border-bottom: 1px solid #e0e0e0;
}

/* 任务条：基于任务行的实际宽度计算百分比 */
.gantt-task-bar {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 50%; /* 第7个月开始：6个列占50%（12列总宽） */
  width: 25%; /* 第7-9个月：3个列占25% */
  height: 70%;
  background: rgba(255, 0, 0, 0.2); /* 最终可设为透明 */
}

为什么这能解决问题： #

• width: max-content让内层容器的宽度等于所有表头列的总宽度，而非外层滚动容器的可视宽度
• 任务条的left和width百分比基于任务行的真实宽度（即内层容器的宽度）计算，自然和表头的月份位置一一对应
• 外层容器仅提供滚动能力，不干扰内部元素的宽度计算

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