Html Inputs Ignore Flex-basis Css Property

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

Solution 1:

The input elements has an instrinsicwidth - 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>

Share