Input elements / buttons are not compressed in a flexible container

Question

When using input elements and buttons inside a flex container, the flex and / or flex-grow properties do nothing.

Code demonstrating my problem.

 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 expect. (using DIV 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> 

Answer 1

The input element, unlike a div , has a default width.

Here is a simple illustration of this parameter:

The browser automatically gives the input data width.

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

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

In addition, the initial setting for flexible elements has min-width: auto . This means that elements cannot be compressed below their width on the main axis.

Therefore, input elements cannot shrink below their default widths and may be forced to overflow a flexible container.

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

Here's the full explanation: why aren't flexible elements reduced to the size of the content?

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

Answer 2

I would like to expand Michael_B's solution

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

You can also do calc(100%)