Les entrées HTML ignorent la propriété CSS flex-basis

Question

Certaines entrées ne perçoivent pas correctement la base flexible. Voici un exemple des plus simples illustrant comment les entrées n'obéissent pas et s'étendent en dehors de leur bloc parent (cf. jsfiddle ) :

<div>
    <input>
    <input>
</div>

<style>     
    div { display: flex; width: 200px; border: 2px solid red; }
    input { flex-basis: 50%; }
</style>

Voici un autre cas, plus complet .

C'est quoi ce bordel ? :)

Answer 1

En input éléments a un instrinsèque width - et la largeur des éléments de flexion (le long de l'axe de flexion) ont par défaut la valeur suivante auto . Réinitialisez-le en utilisant min-width: 0 - voir la démo ci-dessous :

div {
  display: flex;
  width: 200px;
  border: 2px solid red;
}

input {
  flex-basis: 50%;
  min-width: 0; /* ADDED */
}

<div>
  <input>
  <input>
</div>