Why does font-size increase an input's width

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