Is there a CSS workaround for one of the Firefox' bug with shrinking content?

Question

Here is a fiddle with my code: http://jsfiddle.net/kizu/GCahV/ (compare it in Firefox and any other modern browser)

What I want to achieve:

1. There must be an inline block (or at least a block with float) with two parts: left and right.
2. These parts must be side-by-side and must be flexible, right part can be absent at all.
3. The parent block must have some max-width (in % or fixed in px).
4. When the left part is big enough, it must be overflowen, but the right part must always be shown.

Using inline-block, float and overflow: hidden I made it work well in the latest Chrome, Safari and Opera, but struck with the fact that Firefox have a bug: the left part shrinks when the right part is long.

The only CSS workaround I've found is to try position elements for Fx in flex-box model, but it's not perfect: I couldn't make the parent to have max-width (or width at all).

Here is my best try so far: http://jsfiddle.net/kizu/GCahV/1/

---

So, the questions are:

1. Is there a way to make Firefox understand max-width for .b-shrinker?
2. Is there any other CSS only workaround for this Firefox' bug or completely different way to do what I want?

Answer 1

Ok, so with playing with the flexbox a bit I found a somewhat nice solution: http://dabblet.com/gist/4701626

The only problem it have is that Fx loses the ellipsis for the left part, but it's a minor problem, 'cause everything else works fine.

So, here is a code that fixed it:

.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;   
    }

Except for making the block flexboxy, the left block need to have white-space:normal and word-break: break-all, so the long content in the left part won't make this part longer than the body. And to make the overflown content to be hidden, there is height set.

So, the only problem left is the missing ellipsis, so if someone would find a solution for this — I'd be grateful.

Answer 2

1. From what I read, Fx understands max-width from version 1.0 on. https://developer.mozilla.org/en/CSS/max-width#Browser_compatibility. The ellipse works from Fx 7.0 on. So it is not implemented yet.
2. Give .b-shrinker { max-width: 100%; width: 100% } and it will look good in Fx and WebKit and Opera. http://jsfiddle.net/GCahV/11/