Как решить проблему с flex, когда один из чайлдов фиксирован, а второй должен растянуться?

Question

[Павел]

Как заставить правую часть не вылезать за края, а чтобы ее ширина подстраивалась под контейнер?
Демо
UPD2: Решенное неэлегантно Демо

Реальность	Желаемое

P.s.: Не очень понимаю до сих пор как использовать суть флекса, как, например, раньше выдумывал хаки с inline-block, float, и прочие штуки. Там как-то понимается, как оно все работает, а с флексом -- да, понимаю отдельные свойства, а вот как из них собрать решение задачи -- не понятно.
P.p.s.: css calc(100% - 4rem) не предлагать ;)
UPD: text-overflow: ellipsis; должен работать
UPD2. Добавил решение, кто может лучше?

Answer 1

[Сергей Собко]

И такой вариант вас не устроит?

.snippet-main {
    max-width: 230px;
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
 }

Ведь у вас есть фиксированная ширина контейнера, фиксированная ширина изображения. Остается лишь задать макс. ширину блока с именем, а лишнее - спрятать.
Другого варианта я не вижу.

Comments

[Павел]

Суть в том, что это должно работать на любом девайсе: от айфона в 320px до горизонтального galaxy.
Каждый раз делать какую-то max-width -- вообще некошерно.
Видимо, придется делать position: absolute, или отрицательный margin. Чертов флекс)

[Сергей Собко]

Наверное мне пора спать, но я не совсем понимаю: зачем вам каждый раз что-то менять, если в мою конструкцию вместо 230px подставить calc(100% - 4rem) ( p.p.s. ваш читал :D ).
Если есть время - объясните, почему вы этот вариант откидываете, отдавая предпочтения костылям с абсолютным позиционированием и т.д. :)

[Павел]

https://jsfiddle.net/fhc09j46/2/