input / button elements not shrinking in a flex container

When using input and button elements inside a flex container, the flex and/or flex-grow properties don't seem to do anything.

Code that demonstrates my issue.

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 that shows what I'm expecting. (using DIVs instead of input and 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>

An input element, unlike a div, comes with a default width.

Here's a simple illustration of this setting:

enter image description here

The browser automatically gives the input a width.

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

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

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

Also, an initial setting on flex items is min-width: auto. This means that items cannot shrink below their width on the main axis.

Hence, input elements cannot shrink below their default width and may be forced to overflow the flex container.

You can override this behavior by setting your inputs to min-width: 0 (revised codepen)

Here's a full explanation: Why don't flex items shrink past content size?

In some cases, you may need to override input widths using width: 100% or width: 0.

I would like to extend Michael_B solution

In some cases, you may need to override input widths using width: 100% or width: 0.

you can also do calc(100%)

input / button elements not shrinking in a flex container

Related

Recent Posts