Make CSS FlexBox take fixed column width

Question

I would like for the form below to have a fixed width and when a user clicks on the input box, this input box should expand and the other input boxes should shrink but the overall column width of the form should always remain constant.

Same behavior, if the user clicks on the other input boxes.

Is this possible with CSS and Flexbox or some Javascript is required?

Here is a fiddle and a snippet with and example:

 #testForm { padding: 0; display: flex; max-width: 600px; } #input1 { background: red; transition: all .5s ease; } #input2 { background: blue; transition: all .5s ease; } #input1:focus { flex: 1 1 auto; } #input2:focus { flex: 1 1 auto; } 

 <form id="testForm"> <input type="text" id="input1"> <input type="text" id="input2"> </form> 

Answer 1

You can give both input elements flex: 1 to make them fill the parent's width and on :focus make them flex: 2 or whatever you want:

 #testForm { padding: 0; display: flex; max-width: 600px; } #input1 { background: red; } #input2 { background: blue; } #input1, #input2 { flex: 1; transition: all .5s ease; } #input1:focus, #input2:focus { flex: 2; } 

 <form id="testForm"> <input type="text" id="input1"> <input type="text" id="input2"> </form> 

Answer 2

just increase the flex on the focused input

 #testForm{ padding: 0; display: flex; max-width: 600px; } #testForm input{ flex: 1; transition: all .5s ease; } #input1{ background: red; } #input2{ background: blue; } #testForm input:focus{ flex: 3; } 

 <form id="testForm"> <input type="text" id="input1"> <input type="text" id="input2"> </form> 

Answer 3

It is but you have to tweak some things.

Firstly, you have to set a width on your form not a min-width then set your :focus size to whatever is required.

However, input elements have a minimum size of 20 that has to be overridden in the HTML for the true effect to work.

An input element without a set width get its size from its size attribute, which defaults to 20.

 * { margin: 0; padding: 0; box-sizing: border-box; } #testForm { padding: 0; display: flex; width: 600px; border: 1px solid grey; } input { flex: 1; min-width: 0; margin: 0; border: none; } #input1 { background: red; transition: all .5s ease; } #input2 { background: blue; transition: all .5s ease; } #input1:focus { flex: 20; } #input2:focus { flex: 20; } 

 <form id="testForm"> <input type="text" id="input1" size="5"> <input type="text" id="input2" size="5"> </form> 

Answer 4

Is there a reason your form is set to max-width over simply width ?

By setting the static width to 600px and adding a flex-grow rule to all the inputs it seems to be working as you describing.

See snippet below.

 #testForm { padding: 0; display: flex; width: 600px; overflow: hidden; } input { flex: 1; } #input1 { background: red; transition: all .5s ease; } #input2 { background: blue; transition: all .5s ease; } #input1:focus { flex: 1 1 auto; } #input2:focus { flex: 1 1 auto; } 

 <form id="testForm"> <input type="text" id="input1"> <input type="text" id="input2"> </form>