Flex Content Sizing With Input

I have an issue with the shrinking of a flex container with an input inside it. Can anyone explain me why the flex container thinks its content is larger than the input's size?

Solution 1:

Because you define a width to 0 for your input

flex:000; 

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: 00 auto;
}

<div><inputplaceholder="Type something"value="foo" /></div>