2

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

kukkuz
  • 41,512
  • 6
  • 59
  • 95
1234ru
  • 692
  • 8
  • 16

1 Answers1

3

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>
kukkuz
  • 41,512
  • 6
  • 59
  • 95