Firefox, Flexbox et débordement

Question

Après la dernière mise à jour de Firefox, une partie du code css3 a été cassée ... Exemple (jsfiddle).

• En chrome:
• Dans Firefox 34:

Est-ce un bug? Ou travail normal? Que dois-je changer pour résoudre ce problème? Pourquoi #flex ne redimensionne-t-il pas correctement?

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

Réparer:

input { min-width: 1px; }

Pour la direction verticale - min-height; 

Answer 2

Il y a un bug dans Firefox 34. L'un des éléments ne joue pas bien en tant qu'enfant flexible, et l'entrée semble trop large. Cette largeur supplémentaire n'est pas prise en compte par la bordure verte des conteneurs flexibles. 

---

Cela peut être confirmé comme un bug car dans Firefox 33.1 (et Chrome/IE), il n'y a pas de problème avec votre exemple:

Votre exemple Firefox 33.1

Votre exemple Firefox 34.0.5 - La largeur de l’entrée est mal calculée par le conteneur flex et l’entrée elle-même ne peut pas recevoir une largeur inférieure.

---

Pour contourner le problème, nous pouvons définir une largeur sur l’étiquette; cette largeur est reconnue par le conteneur et le bogue est évité dans Firefox 34. Pour être utilisé uniquement dans Firefox, nous pouvons définir la largeur à l'aide du préfixe -moz- avec calc:

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

(Évidemment, les versions précédentes de Firefox reconnaîtront également cette largeur)

Exemple de solution de contournement de bogue

Utiliser inline-flex

D'après votre exemple, il semble que vous souhaitiez utiliser inline-flex afin de contenir la largeur du formulaire à la largeur de ses enfants. J'ai utilisé cela et supprimé la div supplémentaire qui n'est plus nécessaire . Il y a une grande différence dans les largeurs d'entrée par navigateur (ceci est cohérent avec l'exemple de votre question).

Firefox 33

Firefox 34

Chrome

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

variante avec

min-width: 0

travaille aussi

Answer 4

Ce que vous pouvez faire est de soustraire 80px de 100% et de définir une width pour input. De plus, ajoutez box-sizing: border-box pour éviter les débordements.

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 5

Display: flex; only doit figurer sur le conteneur qui doit être flexible, pas sur les éléments internes. Voici le CSS mis à jour, si vous avez besoin d’une largeur spécifique, vous pouvez le définir sur form {}.

CSS

form {}

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

#flex > * {
    flex: 1;
}

label {}

input {}