Flexbox flex-shrink не сжимается до минимальной ширины перед переносом, когда flex-grow отключен ⇐ Html

[Anonymous]

Я пытаюсь создать адаптивный макет Flexbox, в котором каждый .box:
начинается с 200 пикселей,
может уменьшаться до 150 пикселей,
переводится на новую строку только при достижении 150 пикселей,
но не должен увеличиваться на новых строках.
Измените размер окна браузера, чтобы увидеть, как ведут себя поля.
Фрагмент HTML и CSS ниже:

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

body {
display: flex;
flex-wrap: wrap;
gap: 10px;
border: 8px solid black;
padding: 20px;
}

.box {
flex: 0 1 200px;   /* shrink allowed, grow disabled */
min-width: 150px;  /* intended shrink floor */
height: 100px;
background-color: skyblue;
font-size: 24px;
display: flex;
justify-content: center;
align-items: center;
}

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

Flexbox Shrink Before Wrap Issue




Box 1
Box 2
Box 3

Когда flex-grow отключен (flex-grow: 0), блоки сворачиваются до достижения минимальной ширины 150 пикселей.
Если я включаю flex-grow (flex: 1 1 200px), блоки плавно уменьшаются до 150 пикселей, но затем они увеличиваются, заполняя дополнительное пространство на новом строка, которая мне не нужна.
Поэтому, похоже, существует поведение Flexbox, при котором сжатие до минимального значения работает только в том случае, если разрешено увеличение, но отключение роста приводит к преждевременному переносу.

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