flex: 1 0 100px = flex-grow: 1, flex-shrink: 0, flex-basis: 100px

flex-grow: 1 — элемент может расти

flex-shrink: 0 — элемент НЕ может сжиматься

flex-basis: 100px — базовый размер 100px

Ширина контейнера: 500px

Базовый размер всех элементов: 3 × 100px = 300px

Свободное пространство: 500px - 300px = 200px

Распределение на 3 элемента: 200px ÷ 3 ≈ 66.66px каждому

Финальный размер каждого элемента: 100px + 66.66px ≈ 166.66px

const groupBy = (arr, key) =>
  arr.reduce((acc, obj) => {
    (acc[obj[key]] ??= []).push(obj);
    return acc;
  }, {});

 • O(n) по времени
 • Нет пересоздания объектов на каждой итерации
 • Поведение прозрачное и предсказуемое