Esiste una soluzione alternativa CSS per uno dei' bug di Firefox con restringimento contenuti?

Question

Ecco un violino con il mio codice: http://jsfiddle.net/kizu/GCahV/ (confrontarlo in Firefox e ogni altro browser moderno)

Quello che voglio ottenere:

1. Ci deve essere un blocco di linea (o almeno un blocco con float) con due parti:. A sinistra ea destra
2. queste parti devono essere side-by-side e deve essere flessibile, parte destra può essere assente affatto.
3. Il blocco genitore deve avere qualche max-width (in % o fisso in px).
4. Quando la parte sinistra è abbastanza grande, deve essere overflowen, ma la parte destra deve essere sempre indicata.

Utilizzando inline-block, float e overflow: hidden ho fatta lavorare bene nella sua ultima Chrome, Safari e Opera, ma ha colpito con il fatto che Firefox ha un bug:. Gli strizzacervelli parte sinistra quando la parte destra è lungo

L'unica soluzione alternativa CSS che ho trovato è di provare gli elementi di posizione per Fx nel modello flex-box, ma non è perfetto. Non ho potuto fare il genitore di avere max-width (o width affatto)

Qui è il mio miglior prova finora: http://jsfiddle.net/kizu/GCahV/1 /

---

Quindi, le domande sono:

1. C'è un modo per rendere Firefox capire max-width per .b-shrinker?
2. C'è un altro CSS solo per aggirare il baco questo Firefox' o un modo completamente diverso di fare ciò che voglio?

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/