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

Question

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

Quello che voglio ottenere:

1. Ci deve essere un blocco di linea (o almeno un blocco con float) con due parti: sinistra e destra.
2. Queste parti devono essere affiancate e devono essere flessibili, la parte destra può essere assente.
3. Il blocco padre deve avere un numero max-width (in % o risolto in px).
4. Quando la parte sinistra è sufficientemente grande, deve essere sfiorata, ma la parte destra deve sempre essere mostrata.

Utilizzando inline-block, float e overflow: hidden ho fatto funzionare bene nella sua ultima Chrome, Safari e Opera, ma ha colpito con il fatto che Firefox ha un bug: la parte sinistra si contrae quando la parte destra è lunga.

L'unica soluzione CSS che ho trovato è provare elementi di posizione per Fx nel modello flex-box, ma non è perfetto: non ho potuto fare in modo che il genitore avesse max-width (o width).

Ecco 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'è qualche altro CSS solo soluzione alternativa per questo bug di Firefox o un modo completamente diverso di fare ciò che voglio?

Answer 1

Ok, quindi con il gioco con il FlexBox un po 'ho trovato un po' bella soluzione: http://dabblet.com/gist/4701626

L'unico problema che abbiamo è che Fx perde puntini di sospensione per la parte sinistra, ma è un problema minore , perché tutto il resto funziona bene.

Quindi, ecco un codice che ha risolto il tutto:

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

Tranne che per rendere il flexboxy blocco, il blocco di sinistra devono avere white-space:normal e word-break: break-all, in modo che il tempo contenuti nella parte sinistra non farà questa parte più lunga del corpo. E per rendere nascosto il contenuto del sorvolo, è impostato height.

Quindi, l'unico problema rimasto è l'ellissi mancante, quindi se qualcuno dovesse trovare una soluzione per questo - sarei grato.

Answer 2

1. Da quello che ho letto, Fx capisce max-width dalla versione 1.0 in. https://developer.mozilla.org/en/CSS/max-width#Browser_compatibility. L'ellisse funziona da Fx 7.0 in poi. Quindi non è ancora implementato.
2. Dare .b-shrinker { max-width: 100%; width: 100% } e sarà bello in Fx e WebKit e Opera. http://jsfiddle.net/GCahV/11/