CSS поплавок слева, без упаковки и фиксированного размера

Question

У меня есть контейнер с именем timerow, размер которого равен размеру его родителя. В нем я позиционирую время, чтобы было понятно, что означает расстояние в прямоугольниках над ним. Проблема в том, что float: left; отлично работает вместе с маржей в%, но последний элемент всегда переносится. Я не могу сделать контейнер шире, так как тогда поля в% отключены.

Я также безуспешно пробовал display: inline-block; (поскольку пробелы меняют позиционирование) и flexbox, который я также предоставил. Flexbox довольно близок, но когда я масштабирую все до маленького размера или добавляю еще одну метку времени (другой тег), он не просто помещается в крайний правый угол, но он изменяет ширину контейнера и снова меняет положение.

Мой предполагаемый результат состоит в том, что все теги позиционируются относительно своего левого соседа как часть ширины временной шкалы (поскольку я вычисляю это значение в%), и любое переполнение просто видно в той же строке и переполняет поле до справа.

Я предоставил минимальный 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>

Answer 1

Чтобы избежать этого, добавьте отрицательное поле margin-right к последнему элементу, чтобы его ширина не учитывалась в общей ширине и его можно было оставить в первой строке (но при этом могло произойти переполнение):

timerow a:last-child, timerow2 a:last-child {
  margin-right: -40px;
}

Полный код:

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;
}
timerow a:last-child, timerow2 a:last-child {
  margin-right: -40px;
}

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;
}

<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>

Лучшим решением было бы рассмотреть элемент шириной 0, и все ваши вычисления будут проще:

body {
  background-color: #DDD;
}

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

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

.barchart {
  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;
  line-height: 16px;
  margin: 0 5px;
  background: rgba(0,0,0,0.2);
  display: flex;
}

timerow a {
  height: 20px;
  width: 0;
  font-size: 15px;
  text-align: center;
  position:relative;
}
timerow a::before {
  content:attr(data-time);
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  background: #fff;
  color: #919191;
}

<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 data-time="00:00"></a>
  <a style="margin-left:calc((28.94444 + 0.25)*1%);" data-time="07:30"></a>
  <a style="margin-left:calc((63.8055 + 0.5)*1%);" data-time="22:30"></a>
  </timerow>
  
  <timerow>
  <a data-time="00:00"></a>
  <a style="margin-left:calc((28.94444 + 0.25)*1%);" data-time="07:30"></a>
  <a style="margin-left:calc((63.8055 + 0.5)*1%);" data-time="22:30"></a>
  <a style="margin-left:calc((6.25 + 0.5)*1%);" data-time="24:00"></a>
  </timerow>
  
    <timerow style="background:rgba(0,0,0,0.8)">
  <a data-time="00:00"></a>
  <a style="margin-left:calc((28.94444 + 0.25)*1%);" data-time="07:30"></a>
  <a style="margin-left:calc((63.8055 + 0.5)*1%);" data-time="22:30"></a>
  <a style="margin-left:calc((6.25 + 0.5)*1%);" data-time="24:00"></a>
  </timerow>

</div>