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: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>