Как уменьшить ширину цвета фона последней строки, не влияя на выравнивание элементов изгибаемых элементов?

Question

Пожалуйста, посмотрите на изображение ниже

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

Вот мой код

HTML

<div class="container">
  <div class="row title">
    <div>Column 1</div>
    <div>Column 2</div>
    <div>Column 3</div>
    <div>Column 4</div>
  </div>

  <div class="row item-1">
    <div>Sample Title 1</div>
    <div>1</div>
    <div>10</div>
    <div>100</div>
  </div>

  <div class="row item-1">
    <div>Column 2</div>
    <div>2</div>
    <div>20</div>
    <div>200</div>
  </div>

  <div class="row item-1">
    <div>Column 3</div>
    <div>3</div>
    <div>30</div>
    <div>300</div>
  </div>
</div>

CSS

body {
  background-color: purple;
  color: #fff;
}

.container {
  margin-left: 10vw;
  margin-top: 5vw;
}

.row {
  display: flex;
  margin-top: 4vh;
  width: 45vw;
}

.row > div {
  width: 12vw;
}

.row > div:not(:first-child) {
  text-align: center;
}

.container > div:last-child {
  background-color: grey;
  border-radius: 100px;
  padding-left: 2vw;
  margin-left: -2vw;
}

Ссылка на codepen https://codepen.io/anon/pen/KxmJeM

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

Спасибо за вашу помощь

Answer 1

Вы можете попробовать следующий подход. Это что-то вроде хака, но это то, что вам нужно, чтобы это исправить:

body {
  background-color: purple;
  color: #fff;
}

.container {
  margin-left: 10vw;
  margin-top: 5vw;
}

.row {
  display: flex;
  margin-top: 4vh;
  width: 42vw;
}

.row > div {
  width: 12vw;
}

.row > div:not(:first-child) {
  text-align: center;
}

.container > div:last-child {
  position: relative;
  border-radius: 100px;
  padding-left: 2vw;
  margin-left: -2vw;
}
.container > div:last-child:before {
  content: "";
  display: block;
  position: absolute;
  left: 1vw;
  right: 3vw;
  background: grey;
  height: 100%;
  border-radius: 100px;
  z-index: -1;
}

<div class="container">
  <div class="row title">
    <div>Column 1</div>
    <div>Column 2</div>
    <div>Column 3</div>
    <div>Column 4</div>
  </div>
  
  <div class="row item-1">
    <div>Sample Title 1</div>
    <div>1</div>
    <div>10</div>
    <div>100</div>
  </div>
  
  <div class="row item-1">
    <div>Column 2</div>
    <div>2</div>
    <div>20</div>
    <div>200</div>
  </div>
  
  <div class="row item-1">
    <div>Column 3</div>
    <div>3</div>
    <div>30</div>
    <div>300</div>
  </div>
</div>

Answer 2

Добавление этой строки в CSS может работать

.container > div >div:last-child {
  width: 100px; 
 }