HTML inputs ignore flex-basis CSS property [duplicate]

问题

This question already has answers here:

input / button elements not shrinking in a flex container (2 answers)

Why don't flex items shrink past content size? (1 answer)

Closed 2 years ago.

Somewhy inputs do not perceive flex-basis correctly. Here is a simplest example illustrating how inputs do not obey and span outside of their parent block (see jsfiddle):

<div>
    <input>
    <input>
</div>

<style>     
    div { display: flex; width: 200px; border: 2px solid red; }
    input { flex-basis: 50%; }
</style>

Here is another, more comprehensive, case.

What the hell? :)

回答1:

The input elements has an instrinsic width - and width of flex items (along the flex axis) default to auto. Reset this using min-width: 0 - see demo below:

div {
  display: flex;
  width: 200px;
  border: 2px solid red;
}

input {
  flex-basis: 50%;
  min-width: 0; /* ADDED */
}

<div>
  <input>
  <input>
</div>

来源：https://stackoverflow.com/questions/46684636/html-inputs-ignore-flex-basis-css-property