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>