Why does font-size increase an input's width - html

Question

I'm wondering why setting the font-size CSS attribute on an HTML input automatically increases its width?
I understand why it increases the height, but I'd like an input to remain the same base width when changing the font-size.
The reason I ask, is because it is breaking a flex layout I'm building, in which there is an input. When I increase the font-size, the input completely breaks out of the layout.
Here's a (react) reproduction:
<div
style={{
backgroundColor: 'blue',
display: 'flex',
flexDirection: 'column',
maxWidth: 400,
padding: 20,
alignItems: 'center',
}}
>
<div style={{ display: 'flex' }}>
<span>Some text</span>
<input style={{ 'font-size': 20 }} />{' '}
</div>
<div style={{ display: 'flex' }}>
<span>Some text</span>
<input style={{ 'font-size': 50 }} />
</div>
</div>
Is there a clean way to solve this?

Answer 1

<input> tag is one of the replaced elements and they often have intrinsic dimensions.
In flexbox you can override the intrinsic size by adding:
input {
min-width: 0;
}
Or, give it a smaller size than the default value 20:
<input size="1">
Then set the desire size by using flex / flex-grow / flex-basis, or width as needed.

Answer 2

You can use 100% width or a fixed width on the inputs. Also to get this working in IE, you need to remove alignItems: 'center' from the outer most div
<div
style={{
display: 'flex',
flexDirection: 'column',
maxWidth: 400,
padding: 20,
}}
>
<div style={{ display: 'flex' }}>
<span>Some text</span>
<input style={{ 'font-size': 20, width: "100%", boxSizing: "border-box" }} />
</div>
<div style={{ display: 'flex' }}>
<span>Some text</span>
<input style={{ 'font-size': 50, width: "100%", boxSizing: "border-box" }} />
</div>
</div>
For firefox you have to wrap the input in a container and apply flex: 1 1 auto; to the container.
Hope that helps