Flex-row not behaving as expected in Chrome

Question

I expect this to be a quirk of Firefox actually. It works as I want it to there, but not in Chrome or Edge (only other browsers I've looked at).

The situation is I have a fieldset with various inputs & labels and I want to use flexbox to display the inputs horizontally as space allows. (The project uses CakePHP to generate the form fields, so there are some things nested that may not be ideal. That can't be changed.)

Here is my codepen illustrating: https://codepen.io/Innocuous_Name/pen/ayjwyw

<fieldset>
  <div class="form-group">
    <label for="first-name">First Name</label>
    <div class="input-group">
      <input id="first-name" type="text" name="first_name">
    </div>
  </div>
  <div class="form-group">
    <label for="last-name">Last Name</label>
    <div class="input-group"><input id="last-name" type="text" name="last_name"></div>
  </div>
  <div class="form-group"><label for="company-id">Company</label>
    <div><select name="company_id" id="company-id"><option value="">Please Select</option><option value="34">Amazon</option><option value="47">Google</option></select></div>
  </div>
  <div class="form-group"><label for="job-id">Job</label>
    <div><select name="job_id" id="job-id"><option value="">Please Select</option><option value="46">Box Picker</option><option value="47">Executive Assistant</option><option value="48">Communications Manager</option></select></div>
  </div><button type="submit">Submit</button>
</fieldset>

AND css:

* {
    box-sizing: border-box;
    max-width: 100%;  //tried removing
}

fieldset {
    display: flex;
    flex-flow: row wrap;
    flex-wrap: wrap;
    justify-content:stretch;

  & .form-group {
  flex: 1 0 20em;
  /* also tried this:
     flex: 1 0 auto;
     width: 20em;
    // and
      min-width:20em;
*/
    margin: 0 12px 12px 0;

    & .input-group {
        width: 100%;  //tried removing
    }
  }
}

input, select {
    width: 100%;  //tried removing
    border: 1px solid #ddd;
    padding: 6px 4px;
    height: 2.2rem;
    font-size: 1rem;
    font-family: "Open Sans",sans-serif;
}

To be clear, I get the result I want (horizontal flow) in Firefox. Chrome and Edge it flows vertically. I had thought it was the 100% widths, but I tried removing those. I left comments with things I've tried. I'm sure I'm missing something simple, if someone could please put eyes on it for me. I've been pulling my hair out for hours. Thanks!