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

[Anonymous]

При использовании элементов ввода и кнопок внутри гибкого контейнера свойства 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;
}

Код: Выделить всё

Submit

Код, который показывает то, что я ожидаю. (с использованием DIV вместо ввода и кнопки).

Код: Выделить всё

.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;
}

Код: Выделить всё

Nickname
Message
Submit

Подробнее здесь: https://stackoverflow.com/questions/424 ... -container