Учитывайте пробелы при расчете гибкой основы ⇐ CSS

[Anonymous]

Я пытаюсь использовать пробел, чтобы указать промежутки между гибкими элементами в моей сеточной системе, но столкнулся с серьезным недостатком. Кажется, что когда вы используете flex-grow: 0;/

Код: Выделить всё

flex-shrink: 0;

в сочетании со значениями пробела и flex-basis, которые заполняют всю доступную ширину (т. е. три столбца с flex: 0 0 33,3333%;), столбцы переполняют родительский контейнер, поскольку разрыв не учитывает фиксированную ширину, указанную с помощью flex: 0 0 33,3333%.
Аналогично изменению размера блока: border-box;, есть ли способ указать механизму рендеринга, что при определении ширины этих столбцов следует вычитать зазор?
Демонстрация:

Код: Выделить всё

.row {
display: flex;
gap: 30px;
border: 2px solid red;
}

.col {
flex: 0 0 33.3333%;
background: teal;
border: 2px solid #004D4D;
color: white;
font-weight: 700;
padding: 50px;
text-align: center;
}

:root {
font-family: sans-serif;
}

* {
box-sizing: border-box;
}

Код: Выделить всё

With gap:



1

2

3



Without gap:


1

2

3

Примечание: Я мог бы объяснить это с помощью такой формулы, как flex-basis:calc($width - ($gap / ($number-of-columns / 2));, но поскольку это касается многоразовой сеточной системы, я не могу практически учесть все возможные сценарии.

Подробнее здесь: https://stackoverflow.com/questions/721 ... flex-basis