Блок с картинкой упираясь в текст, делается яйцом, как исправить?

Question

[Спартак]

Привет всем. Люди,помогите разобраться мне. Сделал блок с 3 кононками внутри, в каждой колонке картинка и блок с текстом,при адаптиве,текст упирается в картинку и она начинает сужаться горизонтально. скрины и архив приложу. Может я вообще не правильно html- структуру постороил, дайте подзатыльник и покажите как надо делать правильно )) Спасибо за любую помощь и подсказку. Скрины
Оригинал макета: https://www.figma.com/file/Qk6DQfIvqqis3rGg4zj684/... Архив проекта: https://yadi.sk/d/rt9fAYIzdy-5CA

Comments

[DaniilPo]

почему у тебя "Поиск конкретного производителя" написан дважды ?

[Спартак]

DaniilPo, Это я просто добавлял текст,его может быть потом сколько угодно. И вылез косяк вот как видишь.

[DaniilPo]

Спартак, ну получается если убрать текст то всё будет нормально ?

[DaniilPo]

Спартак, просто вся проблема в тексте тебе нужно сделать нормально расстояние от картинки к тексту
на других блоках у тебя всё нормально потому что расстояние нормально сделай так же по середине и будет всё супер

[Danny Arty]

min-width иконке задайте

[Спартак]

Danny Arty, Аты знаешь,сработало. Спасибо.

[Антон Литвиненко]

flex-shrink: 0; иконке

[Danny Arty]

Спартак, кстати да, не заметил что у вас флексы. Как написал Антон Литвиненко, можно и лучше будет задать flex-shrink: 0

Answer 1

[Артем]

Добавьте этот код:

.main__item-icon {
    flex: 0 0 auto;
}

Из-за того, что флекс-элемент не имеет никаких заданных flex свойств, его так скукоживает)))