Ребенок во flex контейнере двигает соседей?

Question

[Егор Тельнов]

https://codepen.io/Egoridze81/pen/ZErqNWO

Блок с текстом сдвигает своих соседей за пределы родителя, как можно это исправить? Задать конечный размер блоку с текстом нельзя, так как размер родителя может меняться, и текст должен занимать свободное место

Comments

[iBird Rose]

код в codepen не рабочий

[Егор Тельнов]

iBird Rose, проверил с двух устройств, все отображается. Есть ошибки какие нибудь?

Answer 1

[Ankhena]

overflow: hidden; для .MarketingNameCell__name-container
Но проверьте во всех браузерах.

Либо для .MarketingNameCell__name-container не max-width: 100%,а

max-width: calc(100% - отступы и ширина двух иконок)

Удобно через кастомные свойства, чтобы не думать о том, что нужно исправлять в нескольких местах.

Comments

[Егор Тельнов]

Спасибо, помогло)

Answer 2

[iBird Rose]

.MarketingNameCell__name-container {min-width: 0;}

Comments

[Егор Тельнов]

Спасибо, работает