Блог

Мне нужно создать подходящий css для: создания блоков, которые могут быть разделены на один или несколько столбцов, в зависимости от размера экрана. (например: если у меня есть 7 полей, это может отображаться на большом экране в 7 столбцах и 1 строке, или это может отображаться на меньшем экране в 2 строках и 4 столбцах, и т.д.

Теперь я делаю в контейнере div:

 display: flex;
flex-wrap: wrap;
overflow-y: auto;
overflow-x: hidden;
  

и в классе box:

 height: 166px;
width: 320px;
  

Я хочу, чтобы, если у меня маленький экран и у меня достаточно места только для одного столбца, например: если родительский элемент div имеет ширину 600 пикселей, у меня будет только один столбец полей, но много дополнительного места, я хочу, чтобы поля в этом случае уменьшались до ширины 250 пикселей (минимальная ширина), и у меня будет 2 столбца..

Я хочу использовать flex-shrink только тогда, когда у меня есть один столбец, созданный из display flex.

Как я могу это сделать? (Я хочу, чтобы это работало во всех браузерах, вот почему я не использовал grid)

Спасибо