web-dev-qa-db-fra.com

les éléments d'entrée / bouton ne rétrécissent pas dans un conteneur flexible

Lorsque vous utilisez des éléments d'entrée et de bouton dans un conteneur flexible, les flex et/ou flex-grow les propriétés ne semblent rien faire.

Code qui illustre mon problème.

button,
input {
  font-size: 1rem;
}

button {
  border: none;
  background-color: #333;
  color: #EEE;
}

input {
  border: 1px solid #AAA;
  padding-left: 0.5rem;
}

.inputrow {
  width: 30rem;
  display: flex;
  margin: 0 -.25rem;
}

.inputrow>* {
  margin: 0 .25rem;
  border-radius: 2px;
  height: 1.75rem;
  box-sizing: border-box;
}

.nickname {
  flex: 1;
}

.message {
  flex: 4;
}

.s-button {
  flex: 1;
}
<div class="inputrow">
  <input type="text" class="nickname" placeholder="Nickname">
  <input type="text" class="message" placeholder="Message">
  <button type="submit" class="s-button">Submit</button>
</div>

Code qui montre ce que j'attends. (en utilisant DIV au lieu de input et button).

.inputrow {
  width: 30rem;
  display: flex;
  flex-flow: row nowrap;
  margin: 0 -.25rem;
}

.inputrow>* {
  margin: 0 .25rem;
  height: 1.75rem;
}

.nickname {
  flex: 1;
  background-color: blue;
}

.message {
  flex: 4;
  background-color: red;
}

.s-button {
  flex: 1;
  background-color: green;
}
<div class="inputrow">
  <div class="nickname">Nickname</div>
  <div class="message">Message</div>
  <div class="s-button">Submit</div>
</div>
htmlcsscss3flexbox
25
viderizer

Un élément input, contrairement à un div, est livré avec une largeur par défaut.

Voici une illustration simple de ce paramètre:

enter image description here

Le navigateur donne automatiquement une largeur au input.

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

div {
  border: 1px solid red;
  display: inline;
}
<form>
  <input>
  <br><br>
  <div></div>
</form>

En outre, un paramètre initial sur les éléments flexibles est min-width: auto. Cela signifie que les éléments ne peuvent pas rétrécir en dessous de leur largeur sur l'axe principal.

Par conséquent, les éléments input ne peuvent pas se réduire en dessous de leur largeur par défaut et peuvent être forcés de déborder le conteneur flexible.

Vous pouvez remplacer ce comportement en définissant vos entrées sur min-width: 0 ( codepen révisé )

Voici une explication complète: Pourquoi les éléments flexibles ne réduisent-ils pas la taille du contenu?

Dans certains cas, vous devrez peut-être remplacer les largeurs d'entrée à l'aide de width: 100% ou width: 0.

58
Michael_B

Je souhaite étendre la solution Michael_B

Dans certains cas, vous devrez peut-être remplacer les largeurs d'entrée à l'aide de width: 100% ou width: 0.

vous pouvez également faire calc(100%)

1
aviram83