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

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/