css3 - propiedad - Firefox, Flexbox y desbordamiento

propiedad align content

Question

Después de la última actualización de Firefox, se ha roto algo del código css3 ... Example (jsfiddle).

• En cromo:
• En Firefox 34:

Es error? ¿O normal trabajando? ¿Qué necesito cambiar para arreglarlo? ¿Por qué #flex no #flex tamaño correctamente?

HTML:

<div id="outer">
    <div id="flex">
        <label>123</label>
        <input type="text" value="some text" />
    </div>
</div>  

CSS:

#outer { display: flex; }

#flex {
    display: flex;
    border: 1px solid green;
    outline: 1px solid red;
}

label { flex: 0 0 80px; }

Answer 1

Fijar:

input { min-width: 1px; }

Para dirección vertical - min-height ;

Answer 2

Hay un error en Firefox 34. Uno de los elementos no es jugar bien como niño flexible, y la entrada parece ser demasiado amplia. Este ancho adicional no es tomado en cuenta por el borde verde de los contenedores flexibles.

Esto se puede confirmar como un error porque en Firefox 33.1 (y Chrome / IE) no hay ningún problema con su ejemplo:

Tu ejemplo Firefox 33.1

Your Example Firefox 34.0.5 - El ancho del ancho de entrada está mal calculado por el contenedor flexible y la entrada en sí no puede tener un ancho menor.

Como solución alternativa, podemos establecer un ancho en la etiqueta; este ancho es reconocido por el contenedor y el error se evita en Firefox 34. Para ser usado solo en Firefox, podemos establecer el ancho usando el prefijo -moz- con calc:

label {
    width: -moz-calc(80px);
}

(Obviamente, las versiones anteriores de Firefox también reconocerán este ancho)

Ejemplo de solución de error

Utilizando inline-flex

En su ejemplo, parece que desea utilizar inline-flex para contener el ancho del formulario al ancho de sus hijos. He usado esto y quité el div adicional que ya no es necesario. Hay una gran diferencia en los anchos de entrada por navegador (esto es consistente con el ejemplo en su pregunta).

Firefox 33

Firefox 34

Cromo

IE11

form {
  display: inline-flex;
  border: solid 1px green;
  outline: 1px solid red;
}
label {
  flex: 0 0 80px;
  width: -moz-calc(80px);
}

<form>
  <label>123</label>
  <input type="text" value="some text" />
</form>

Answer 3

Lo que podría hacer es restar 80px del 100% y establecer un width para la input . Además, agregue box-sizing: border-box para evitar el desbordamiento.

form {
  display: flex;
}
#flex {
  display: flex;
  border: 1px solid green;
  outline: 1px solid red;
}
label {
  display: flex;
  flex: 0 0 80px;
}
input {
  width: calc(100% - 80px);
  box-sizing: border-box;
}

<form>
  <div id="flex">
    <label>123</label>
    <input type="text" value="some text" />
  </div>
</form>

Answer 4

variante con

min-width: 0

tambien funciona

Answer 5

Display: flex; solo necesita estar en el contenedor que necesita ser flexible, no los elementos internos. Aquí está el CSS actualizado, si necesita un ancho específico, puede configurarlo en el form {} .

CSS

form {}

#flex {
    display: flex;
    border: 1px solid green;
    outline: 1px solid red;
}

#flex > * {
    flex: 1;
}

label {}

input {}