Почему text-overflow: ellipsis нарушает границы flex-контейнера?

Question

[Toshegg]

В примере ниже при использовании text-overflow: ellipsis flex-контейнер row2 расширяется за границы главного контейнера. В данном примере я использую flex-basis: 90% для row2. Если использовать, например, width: 90%, то элемент все равно будет вылезать за пределы контейнера, так как между row1 и row2 есть margin.

https://jsfiddle.net/8krtL9ev/1/

Проблема появляется только при text-overflow: ellipsis. Если же текст влезает в panel, то все хорошо и панель занимает ровно 50% от row2.

Подскажите пожалуйста, с чем связано такое поведение и как сделать так, чтобы панель занимала 50% от row2, а при наличии свободного места расширялась до 100% от row2, и чтобы при этом текст обрезался корректно и row2 не вылезал за пределы container?

UPD: Вариант с калькулируемой шириной не подходит, так как у меня есть несколько последовательных контейнеров и ширина красного блока должна быть именно 10% от всего контейнера: https://jsfiddle.net/j13gzr1e/1/.

Answer 1

[Ankhena]

Поменяйте flex-basis на width

https://jsfiddle.net/Lwugajwy/

Comments

[Toshegg]

Это не подходит, Вы зря убрали flex-shrink на row1.
https://jsfiddle.net/j13gzr1e/1/
У меня несколько последовательных контейнеров, и ширина красного блока должна быть одинакова, так как в ней расположена аватарка.

[Toshegg]

Извините, не то скинул, вот с calc: https://jsfiddle.net/j13gzr1e/2/

[Ankhena]

Toshegg: flex-shrink у Вас также в %

Добавьте *{box-sizing: border-box;} https://jsfiddle.net/s24rk7qk/

[Toshegg]

Ankhena W: Вроде работает, спасибо Вам большое!
А Вы не могли бы объяснить причину такого поведения row2, если у него ширина задана во flex-basis?

[Ankhena]

Toshegg: на данный момент ничего кроме того, что флексы, к сожалению, пока не совершенны я не думаю.

Answer 2

[mester]

Сталкивался с аналогичной проблемой - слайдер не мог взять 100% ширины родителя, который был флекс дитём (левая фиксированной ширины, правая резиновая). Выход был только один - выкинуть флекс к черту и поставить float:left на левую + margin-left на правую