¿Existe una solución CSS para uno de los errores de Firefox con contenido reducido?

Question

Aquí es un violín con mi código: http://jsfiddle.net/kizu/GCahV/ (comparar en Firefox y cualquier otro navegador moderno)

Lo que yo quiero lograr:

1. Debe haber un bloque de línea (o por lo menos un bloque con float) con dos partes: izquierda y derecha.
2. Estas piezas deben estar una al lado de la otra y deben ser flexibles, la parte derecha puede estar ausente.
3. El bloque primario debe tener algunos max-width (en % o arreglado en px).
4. Cuando la parte izquierda es lo suficientemente grande, se debe desbordar, pero siempre se debe mostrar la parte derecha.

Usando inline-block, float y overflow: hidden Hice que funcione bien en la última Chrome, Safari y Opera, pero golpeó con el hecho de que Firefox tiene un error: la parte izquierda se contrae cuando la parte derecha es larga.

La única solución de CSS que he encontrado es probar los elementos de posición para Fx en el modelo de flex-box, pero no es perfecto: no pude hacer que el padre tenga max-width (o width en absoluto).

Aquí es mi mejor intento hasta el momento: http://jsfiddle.net/kizu/GCahV/1/

---

Por lo tanto, las preguntas son:

1. ¿Hay una manera de hacer entender Firefox max-width para .b-shrinker?
2. ¿Hay alguna otra solución de CSS para este error de Firefox o una forma completamente diferente de hacer lo que quiero?

Answer 1

Ok, así que con jugar con la FlexBox un poco encontré una solución algo agradable: http://dabblet.com/gist/4701626

El único problema que tiene es que Fx pierde los puntos suspensivos para la parte izquierda, pero es un problema menor porque todo lo demás funciona bien

lo tanto, aquí es un código que se fija:

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

Excepto para hacer el flexboxy bloque, el bloque de la izquierda necesita tener white-space:normal y word-break: break-all, por lo que el contenido de largo en la parte izquierda no hará esta parte más larga que el cuerpo. Y para ocultar el contenido desbordado, existe height establecido.

Por lo tanto, el único problema que queda es la falta de puntos suspensivos, por lo que si alguien encuentra una solución para esto, lo agradecería.

Answer 2

1. Por lo que leo, Fx entiende max-anchura de la versión 1.0 en. https://developer.mozilla.org/en/CSS/max-width#Browser_compatibility. La elipse funciona desde Fx 7.0 en adelante. Por lo tanto, aún no está implementado.
2. Dale .b-shrinker { max-width: 100%; width: 100% } y se verá bien en Fx y WebKit y Opera. http://jsfiddle.net/GCahV/11/