Flex-row在Chrome

Question

我希望这实际上是Firefox的一个怪癖。它的工作方式与我想要的一样，但不适用于Chrome或Edge（仅限其他我浏览过的浏览器）。

情况是我有一个带有各种输入的字段集。标签，我想使用flexbox在空间允许的情况下水平显示输入。 （该项目使用CakePHP生成表单字段，因此有些嵌套的东西可能不太理想。不能改变。）

以下是我的代码说明：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;
}

要清楚，我在Firefox中得到了我想要的结果（水平流）。 Chrome和Edge垂直流动。 我以为这是100％宽度，但我尝试删除它们。我用我尝试过的东西留下了评论。我确定我错过了一些简单的东西，如果有人可以请我注意它。我已经把头发拉了几个小时。谢谢！