flexbox изменить размер дочерней ширины должен изменить только следующий родной ширины

Question

У меня есть контейнер flexbox, в котором есть dynamici c количество элементов.

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

Я хочу иметь возможность изменять размер каждый раз, когда один элемент (за исключением последнего), и он должен изменять только ширину самого элемента и его правильный элемент родного брата. Например, если у меня есть 4 элемента, изначально ширина каждого элемента должна составлять 25%, а если я перетаскиваю item1, чтобы уменьшить его, его ширина должна уменьшиться до 20%, item2 должен увеличиться до 30%, а остальные элементы должны остаться та же ширина 25%.

вот мой прогресс:

.container {
  display: flex;
}

.item {
  width: 25%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #4fa0f38c;
  border: 1px solid white;
}

.item:not(:last-child) {
  resize: horizontal;
  overflow: auto;
}

<div class='container'>
  <div class='item'>item 1</div>
  <div class='item'>item 2</div>
  <div class='item'>item 3</div>
  <div class='item'>item 4</div>
</div>

Я ищу решение, использующее css с flex (нет js).

Answer 1

Вы можете положиться на активное состояние, чтобы смоделировать это, но оно не очень точно, потому что :active сработает с любым событием щелчка:

.container {
  display: flex;
}

.item {
  width: 25%;
  height: 60px;
  display: flex;
  flex-grow:1;
  align-items: center;
  justify-content: center;
  background-color: #4fa0f38c;
  border: 1px solid white;
}

.item:not(:last-child) {
  resize: horizontal;
  overflow: auto;
}
/* all the element should not shrink */
.container:active *{
  flex-shrink:0;
}
/* allow only the right element to shrink*/
.item:active + * {
  flex-shrink:1;
}
/* make the right element grow more (when we decrease the left one)*/
.item:active + * {
  flex-grow:99999;
}

<div class='container'>
  <div class='item'>item 1</div>
  <div class='item'>item 2</div>
  <div class='item'>item 3</div>
  <div class='item'>item 4</div>
</div>