将宽度设置为溢出的柔性盒容器的百分比

Question

我正在使用CSS构建甘特图。我计算任务从标题中第一个日期开始的"偏移量"，以及基于持续时间的任务宽度占标题中日期之间总范围的百分比-请参阅示例。这在很大程度上可以正常工作，除非页眉中有太多的月份，因此溢出开始滚动，因为偏移量的百分比&宽度被应用于除可滚动部分之外的容器宽度。如何修复此问题，以便将这些值应用于容器的实际可滚动宽度？(希望不使用任何JS(

在本例中，任务应在50%(即第7个月开始(时开始，并运行25%(即至第9个月结束(。您可以通过移除min-width:300px;进行检查

(注意，红色背景最终将是透明的(

.container {
overflow-x: auto;
width:100%;
background-color:#eee;
}
.container .months {
display:flex;
flex-direction:row;
}
.container .months .month {
min-width:300px;
padding:5px 10px;
border:solid 1px black;
flex: 1 0 0%;
}
.container .bars .bar {
display:flex;
flex-direction:row;
}
.container .bars .bar .spacer {
background-color:red;

}
.container .bars .bar .task {
background-color:yellow;
}

<div class="container">

<div class="months">
<div class="month">Month 1</div>
<div class="month">Month 2</div>
<div class="month">Month 3</div>
<div class="month">Month 4</div>
<div class="month">Month 5</div>
<div class="month">Month 6</div>
<div class="month">Month 7</div>
<div class="month">Month 8</div>
<div class="month">Month 9</div>
<div class="month">Month 10</div>
<div class="month">Month 11</div>
<div class="month">Month 12</div>
</div>

<div class="bars">
<div class="bar">
<span class="spacer" style="width:50%"></span>
<span class="task" style="width:25%">Task 1</span>
</div>
</div>
</div>

Answer 1

display: grid将解决此问题。bars将位于与months元素大小相同的轨道内

.container {
overflow-x: auto;
display: grid;
background-color:#eee;
}
.container .months {
display:flex;
flex-direction:row;
}
.container .months .month {
min-width:300px;
padding:5px 10px;
border:solid 1px black;
flex: 1 0 0%;
}
.container .bars .bar {
display:flex;
flex-direction:row;
}
.container .bars .bar .spacer {
background-color:red;

}
.container .bars .bar .task {
background-color:yellow;
}

<div class="container">

<div class="months">
<div class="month">Month 1</div>
<div class="month">Month 2</div>
<div class="month">Month 3</div>
<div class="month">Month 4</div>
<div class="month">Month 5</div>
<div class="month">Month 6</div>
<div class="month">Month 7</div>
<div class="month">Month 8</div>
<div class="month">Month 9</div>
<div class="month">Month 10</div>
<div class="month">Month 11</div>
<div class="month">Month 12</div>
</div>

<div class="bars">
<div class="bar">
<span class="spacer" style="width:50%"></span>
<span class="task" style="width:25%">Task 1</span>
</div>
</div>
</div>