Pourquoi les éléments d'entrée de mon conteneur Flex ne rétrécissent-ils pas ?

Les éléments du conteneur flexible ne rétrécissent pas

Lorsque vous essayez d'utiliser flex et flex-grow dans un conteneur flexible abritant des éléments d'entrée et de bouton, l'effet attendu le comportement de redimensionnement peut ne pas se produire. Cette anomalie provient de la largeur par défaut attribuée aux éléments d'entrée par les navigateurs, contrairement aux divs.

Vous trouverez ci-dessous un extrait illustrant l'attribution automatique de la largeur par le navigateur :

Dans ce scénario, le navigateur attribue une largeur définie à l'entrée, quels que soient les paramètres flex.

Considérez ce qui suit :

input {
  border: 1px solid blue;
  display: inline;
}

div {
  border: 1px solid red;
  display: inline;
}

<form>
  <input>
  <br><br>
  <div></div>
</form>

Dans l'extrait fourni, l'élément d'entrée conserve sa largeur par défaut, tandis que le div s'adapte aux dimensions du conteneur flexible.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!