CSS Flex-basis doesn't work when I resize the screen

Question

First off, this is what I want. Two input + one select on the first row, two input on the second row.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

form {
  padding: 1em;
  display: flex;
  flex-wrap: wrap;
}

input,
select {
  flex: 1 1 33%;
}

<form>
  <input name="name" value="1" />
  <input name="company" value="2" />
  <select name="theme">
    <option value="dark">Dark</option>
    <option value="colorful">Colorful</option>
    <option value="light">Light</option>
  </select>
  <input name="title" value="3" />
  <input type="email" name="email" value="4" />
</form>

When I run this code, it's ok on big screen. But it works in the strange way on small screen like below.

I wonder what's wrong with flex-basis. What's the matter?