Почему растягивается слайдер во flexbox контейнере?

Question

[Артем Чернявский]

Если поместить слайдер во flexbox-элемент, у которого задано свойство flex-grow: 1, слайдер неверно считает ширину и вылазит далеко за пределы элемента, даже если у родителя задана фиксированная ширина/высота.

https://codepen.io/cherniavsky94/pen/LgmQaZ

Кто с этим сталкивался, как решить данную проблему?

Answer 1

[AlexKeller]

https://codepen.io/anon/pen/KGRBqO
Магия min-width: 0 в действии

Comments

[Артем Чернявский]

Спасибо! Сам бы не додумался )

[Тимур Орлов]

Это просто жесть какая-то ))) Алекс, объясни, пожалуйста....вот сколько верстаю, сколько сотен всяких плюшек-костылей как узнал так и сам обнаружил...а вот этот смешной "прикол" не знал..почему такое поведение при его использовании происходит?

[AlexKeller]

Тимур Орлов,
https://habr.com/post/329820/
Во втором параграфе про min-width есть небольшое объяснение. А так это конечно была веселая история, когда однажды мы обновили версию CEF (Chromium Embedded Framework) и интерфейс расползся во многих таких вот местах. Пришлось покурить мануалы и стековерфлоу ))
Или вот коротенькая статья по этой проблеме: https://css-tricks.com/flexbox-truncated-text/

[Тимур Орлов]

AlexKeller, благодарю за информацию, ответ, интересные факты )