khusamov
@khusamov
ReactJS, NodeJS, TypeScript, Sencha ExtJS

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

Код в песочнице: jsfiddle.net/khusamov/ydgsv70x/1
Когда наводишь на полоску, то раздвинувшись появляется текст.
Я поставил для полоски overflow: hidden; а для текста фиксированную ширину, чтобы текст обрезался, когда он больше по ширине чем полоска.
Но это не получилось. И когда полоска меньше текста, то текст увеличивается по высоте, вместо того чтобы обрезаться.
Как все-таки зафиксировать ширину текста?
  • Вопрос задан
  • 654 просмотра
Решения вопроса 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
flex-элемент всегда будет стараться подстроится под имеющееся место.
Заверните текст в еще один элемент, который не будет находится во флекс-контексте, и его ширина будет такой, какую вы ему укажете.

jsfiddle.net/ydgsv70x/3

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы