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

Question

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

Lo que quiero lograr:

1. Debe haber un bloque en línea (o al menos un bloque con float) con dos partes: izquierda y derecha.
2. Estas partes deben ser una de lado a lado y deben ser flexibles, la parte correcta puede estar ausente en absoluto.
3. El bloque principal debe tener algunos max-width (en % o fijado en px).
4. Cuando la parte izquierda es lo suficientemente grande, debe ser desbordada, pero la parte derecha siempre debe mostrarse.

Usando inline-block, float y overflow: hidden Lo hice funcionar bien en el último Chrome, Safari y Opera, pero golpeé con el hecho de que Firefox tiene un error: la parte izquierda se encoge cuando la parte correcta es larga.

La única solución de CSS que he encontrado es probar elementos de posición para FX en el modelo Flex-Box, pero no es perfecto: no podría hacer que el padre tenga max-width (o width en absoluto).

Aquí está mi mejor intento hasta ahora: http://jsfiddle.net/kizu/gcahv/1/

---

Entonces, las preguntas son:

1. ¿Hay alguna forma de hacer que Firefox entienda? max-width por .b-shrinker?
2. ¿Hay algún otro Solo CSS Solución para este error de Firefox o una forma completamente diferente de hacer lo que quiero?

Answer 1

Ok, con un poco de juego con el Flexbox, encontré una solución algo buena: http://dabblet.com/gist/4701626

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

Entonces, aquí hay un código que lo solucionó:

.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 por hacer el bloque FlexBoxy, el bloque izquierdo debe tener white-space:normal y word-break: break-all, entonces el contenido largo en la parte izquierda no hará que esta parte sea más larga que el cuerpo. Y para hacer que el contenido desbordado esté oculto, hay height establecer.

Entonces, el único problema que queda es el elipsis faltante, por lo que si alguien encontrara una solución para esto, estaría agradecido.

Answer 2

1. Por lo que leí, FX entiende el ancho máximo de la versión 1.0 en.https://developer.mozilla.org/en/css/max-width#browser_compatibility. La elipse funciona desde FX 7.0 ON. Entonces aún no está implementado.
2. Dar .b-shrinker { max-width: 100%; width: 100% } Y se verá bien en FX y WebKit y Opera. http://jsfiddle.net/gcahv/11/