Элементы ввода/кнопки не сжимаются в гибком контейнере

При использовании элементов ввода и кнопки внутри контейнера flex свойства flex и/или flex-grow ничего не делают.

Код, демонстрирующий мою проблему.

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>

Ответ 1

Элемент input, в отличие от div, имеет ширину по умолчанию.

Вот простая иллюстрация этого параметра:

Браузер автоматически дает input данные ширину.

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

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

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

Ответ 2

Я хотел бы расширить решение Michael_B

В некоторых случаях вам может потребоваться переопределить ширину ввода, используя width: 100% или width: 0.

Вы также можете сделать calc(100%)