CSS GRID неправильно ограничивает ширину столбца, когда присутствует CSS-ширина MIN ⇐ Html

[Anonymous]

У меня есть следующий HTML. Я ожидаю, что столбцы будут иметь следующую ширину: < /p>
Сначала суммируйте единицы FR: 0,370162 + 0,46852 + 0,281787 = 1,120469 < /p>

столбец 1 = ~ 198px (600 * 0,370162 /1.120469) < /li>
столбец 2 = ~ 250px (600 * 0,46852 /1.120469) < /li>
Столбец 3 = ~ 150px (600 * 0,281787 /1.120469) < /li>
< /ul>
Вместо этого все браузеры, которые я тестировал (Chrome, Safari, Firefox) составит столбцы со следующими Ширина: < /p>

Column 1 = ~ 165px < /li>
Column 2 = ~ 209px < /li>
< li> столбец 3 = ~ 150px < /li>
< /ul>
Таким образом, столбец 3 - правая ширина. Что даже странно, если я удалю мин-ширину: 150px css, столбцы являются ожидаемой шириной! Если я удалю мин-ширину CSS и изменю сетчатые колонны на сетчатые колонны: Minmax (150px, 0,370162FR) MinMax (150px, 0,46852FR) Minmax (150px, 0,281787frfr ) Проблема по -прежнему воспроизводит. Или есть какой -то угол спецификации, который мне не хватает? />


*,
::before,
::after {
box-sizing: border-box;
}
.table {
display: grid;
width: 600px;
padding: 1px;
gap: 1px;
background-color: #ccc;
grid-template-columns: 0.370162fr 0.46852fr 0.281787fr;
}
.cell {
min-width: 150px;
padding: 8px 12px;
background-color: white;
}











Подробнее здесь: https://stackoverflow.com/questions/793 ... is-present