Flex content sizing with input

Question

I have an issue with the shrinking of a flex container with an input inside it.

div {
  border: 2px solid rebeccapurple;
  
  display: inline-flex;
}

input {
  flex: 0 0 0;
  min-width: 0;
  width: auto;
}

<div>
  <input placeholder="Type something" value="foo" />
</div>

Can anyone explain me why the flex container thinks its content is larger than the input's size?

Take a look at [this question](https://stackoverflow.com/questions/7168727/make-html-text-input-field-grow-as-i-type) and [css-tricks](https://css-tricks.com/auto-growing-inputs-textareas/) please, — Gunther, Jan 22 '21 at 16:18
actually it's considered as a bug, flex-basis is ignored, using width:0 will give you the correct output (check the bug section in the duplicate) — Temani Afif, Jan 22 '21 at 19:52

score -2 · Answer 1 · answered Jan 22 '21 at 16:38

Because you define a width to 0 for your input

flex:0 0 0;

the last value to 0 is the flex-basis (it's the initial main size)

and after you define a min-width:0 and a width:auto thus all is based on the 0 value

div {
  border: 2px solid rebeccapurple;
  
  display: inline-flex;
}

input {
  flex: 0 0 auto;
}

<div>
  <input placeholder="Type something" value="foo" />
</div>

1 Answers1