Создайте три столбца одинакового размера (изменяемого размера) [дубликат] ⇐ CSS

[Anonymous]

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

Если затем, удерживая разделитель, перетащить его влево или вправо, два окружающих столбца должны увеличиться/уменьшиться в ширину соответственно, но не последний элемент, который должен остаться неизменным.
р>
Какой подход мне следует попробовать? Заранее спасибо!

Вот несколько визуализаций моих планов:



Когда вы перетаскиваете разделитель между фиолетовым и синим полем:



До сих пор я пробовал это с flex: 1;, а затем всегда менял flex-basis, но это влияет на ширину всех трех элементов, а не только два окружающих.

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