Есть ли обходной путь CSS для одной из ошибок Firefox с сокращением содержимого?

Question

Вот скрипка с моим кодом: http://jsfiddle.net/kizu/GCahV/ (сравните его в Firefox и любом другом современном браузере)

Чего я хочу добиться:

1. Тамдолжен быть встроенным блоком (или, по крайней мере, блоком с float), состоящим из двух частей: левой и правой.
2. Эти части должны быть рядом и должны быть гибкими, правая часть может отсутствовать ввсе.
3. У родительского блока должно быть немного max-width (в % или фиксированное в px).
4. Когда левая часть достаточно велика, она должна быть переполнена, новсегда должна отображаться правая часть.

Использование inline-block, float и overflow: hidden Я хорошо работал в последних версиях Chrome, Safari и Opera, но поразил тот факт, что Firefoxесть ошибка: левая часть сжимается, когда правая часть длинная.

Единственный найденный мной обходной путь CSS - это попробовать позиционировать элементы для Fx в модели flex-box, но это не идеально: я не смог 'у родителя должно быть max-width (или width вообще).

Вот моя лучшая попытка на данный момент: http://jsfiddle.net/kizu/GCahV/1/

---

Итак, вопросы:

1. Есть ли способ заставить Firefox понять max-width для .b-shrinker?
2. Есть ли еще какой-нибудь CSSтолько обходной путь для этой ошибки Firefox или совершенно другой способ сделать то, что я хочу?

Answer 1

1. Из того, что я прочитал, Fx понимает max-width начиная с версии 1.0.https://developer.mozilla.org/en/CSS/max-width#Browser_compatibility. Эллипс работает с Fx 7.0.Так что он еще не реализован.
2. Дайте .b-shrinker { max-width: 100%; width: 100% }, и он будет хорошо смотреться в Fx, WebKit и Opera.http://jsfiddle.net/GCahV/11/

Answer 2

Хорошо, немного поиграв с flexbox, я нашел несколько удачное решение: http://dabblet.com/gist/4701626

Единственная проблема, с которой он сталкивается, заключается в том, что Fx теряет многоточие для левой части, но это небольшая проблема, потому что все остальное работает нормально.

Итак, вот код, который это исправил:

.b-wrapper_fixed .b-shrinker__in {
    display: -moz-box;
    -moz-box-orient: horizontal;
    -moz-box-direction : reverse;
    }
.b-wrapper_fixed .b-shrinker__left {
    white-space: normal;
    word-break: break-all;
    -moz-box-flex: 1;   
    height: 1.2em;
    }
.b-wrapper_fixed .b-shrinker__right {
    -moz-box-flex: 1;   
    }

За исключением создания блока flexboxy, в левом блоке должны быть white-space:normal и word-break: break-all, поэтому длинное содержимое в левой части не сделает эту часть длиннее тела. И чтобы скрытый контент был скрыт, есть набор height.

Итак, единственной проблемой остается пропавший многоточие, поэтому, если кто-то найдет решение для этого - я был бы благодарен.