Как сделать, чтобы ширина блока не уменьшалась внутри flex-контейнера?

Question

[Святослав Хусамов]

Код в песочнице: jsfiddle.net/khusamov/ydgsv70x/1
Когда наводишь на полоску, то раздвинувшись появляется текст.
Я поставил для полоски overflow: hidden; а для текста фиксированную ширину, чтобы текст обрезался, когда он больше по ширине чем полоска.
Но это не получилось. И когда полоска меньше текста, то текст увеличивается по высоте, вместо того чтобы обрезаться.
Как все-таки зафиксировать ширину текста?

Answer 1

[Сергей delphinpro]

flex-элемент всегда будет стараться подстроится под имеющееся место.
Заверните текст в еще один элемент, который не будет находится во флекс-контексте, и его ширина будет такой, какую вы ему укажете.

jsfiddle.net/ydgsv70x/3

Ну и кроме того (не в данном случае) не стоит забывать о свойствах min- max-width/flex-shrink. Они могут выручить.

Comments

[Сергей delphinpro]

и visibility попробуйте заменить на opacity. На мой взгляд, лучше будет.

[Святослав Хусамов]

Сергей: Спасибо, стало лучше! https://jsfiddle.net/khusamov/ydgsv70x/ Правда как выяснилось в IE11 не работает(((