我有一个名为timerow的容器，它和其父级一样大。 在它里面我定位时间，所以在它上面的方框里很清楚距离意味着什么。 问题是，float:left；可以与%中的边距完美地协同工作，但最后一个元素总是换行的。 我不能把容器变宽，因为从那以后，%的边距就变差了。

我还尝试了display:inline-block；，但没有成功（因为空格会改变定位agian）和flexbox，我也提供了flexbox。 Flexbox非常接近，但是当我将所有的东西缩放到很小，或者添加另一个时间标签（另一个标签）时，它并不只是放在最右边，而是会改变容器的宽度，并再次改变位置。

我的预期结果是，所有标记相对于它们的左侧邻居定位为timerow宽度的一个分数（因为我计算的是%值），并且任何溢出都只能在同一行中可见，并溢出右侧的框。

我提供了一个最小的jsfiddle。

body {
  background-color: #DDD;
}

.block {
  display: block;
  background: #ccc;
  height: 100%;
  font-size: .75em;
  float: left;
}

.block:nth-child(n+2) {
  margin-left: 0.5%;
}

.barchart {
  grid-area: all;
  display: grid;
  grid-template-columns:
  [viewport-start] minmax(9px, 1fr)
  [container-start] minmax(20em, 35em)
  [container-end] minmax(9px, 1fr) [viewport-end];
  grid-auto-rows: 30px;
}

row {
  padding: 5px;
  box-sizing: border-box;
  grid-column: container;
  grid-row: span 4;
  line-height: 120px;
  text-align: center;
}

timerow {
  grid-column: container;
  grid-row: span 1;
  line-height: 16px;
  margin: 0 5px;
  
  background: rgba(0,0,0,0.2);
  display: flex;
  justify-content: flex-start;
  flex-flow: row nowrap;
}

timerow a {
  height: 20px;
  width: 40px;
  font-size: 15px;
  color: #919191;
  text-align: center;
  background: #fff;
}

timerow a:first-child, timerow2 a:first-child {
  margin-left: -21px;
}

timerow2 {
  grid-column: container;
  grid-row: span 1;
  line-height: 16px;
  margin: 0 5px;
  
  background: rgba(0,0,0,0.8);
}
timerow2 a {
  height: 20px;
  width: 40px;
  font-size: 15px;
  color: #919191;
  text-align: center;
  background: #fff;
  float: left;
}

和html

<div class="barchart">
  <row style="animation: none;width:100%;">
    <a style="width:28.9444444444%;" class="block"></a>
    <a style="width:63.805555555%;" class="block"></a>
    <a style="width:6.25%;" class="block"></a>
  </row>
  
  <timerow>
  <a>00:00</a>
  <a style="margin-left:calc((28.94444 + 0.25)*1% - 40px);">07:30</a>
  <a style="margin-left:calc((63.8055 + 0.5)*1% - 40px);">22:30</a>
  </timerow>
  
  <timerow>
  <a>00:00</a>
  <a style="margin-left:calc((28.94444 + 0.25)*1% - 40px);">07:30</a>
  <a style="margin-left:calc((63.8055 + 0.5)*1% - 40px);">22:30</a>
  <a>24:00</a>
  </timerow>
  
    <timerow2>
  <a>00:00</a>
  <a style="margin-left:calc((28.94444 + 0.25)*1% - 40px);">07:30</a>
  <a style="margin-left:calc((63.8055 + 0.5)*1% - 40px);">22:30</a>
  <a>24:00</a>
  </timerow2>

</div>