Flex item not shrinking on screen re-size like sibling items

Question

I have three inputs of type email, text & submit contained within a div with display: flex so that all the inputs appear on a row.

I am using flex property for these elements to occupy available space, with flex: 2 for email & text, and flex: 1 for submit.

However, when I am shrinking the browser window, only the email & text are resizing. The submit element is somehow stuck at some fixed width & flex property doesn't seem to be working.

CODE:

.display-forms {
  display: flex;
  margin: 50px 0;
}
.input-field {
  position: relative;
  flex: 2;
}
input {
  display: block;
  height: 60px;
  width: 100%;
  padding: 0 10px;
  font-size: 18px;
}
input[type="submit"] {
  flex: 1;
  background: white;
  color: #ba9e44;
  font-size: 24px;
  padding: 0 15px;
}

<div class="display-forms">
  <div class="input-field">
    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
  </div>
  <div class="input-field">
    <input type="text" value="" name="FNAME" class="" id="mce-FNAME">
  </div>
  <input type="submit" value="Subscribe" name="subscribe" id="mc-subscribe" class="button">
</div>