输入中的弹性增长行为在浏览器中是不同的

Question

我想创建一个内联表单，该表单使用其父容器的100％宽度并扩展输入以填充任何未使用的空间。

我想到的代码： https://jsfiddle.net/k8Lbm1we/

.container {
  width: 500px;
  background-color: #CDCDCD;
  padding: 15px;
}

.form-inline-expanded {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
 }

    .form-inline-expanded input {
       flex-grow: 1;
       //width: 100%;
    }
   
    .form-inline-expanded .no-wrap {
        flex-shrink: 0;
    }
    
    .form-inline-expanded *:not(:first-child) {
        margin-left: 3px;
    }
}

<div class="container">
<div class="form-inline-expanded">
    <input />
    <select>
            <option>&lt;</option>
            <option>&lt;=</option>
            <option>=</option>
    </select>
    <span class="no-wrap">Plan Duration [d]</span>
    <select>
            <option>&lt;</option>
            <option>&lt;=</option>
            <option>=</option>
    </select>
    <input />
</div>
</div>

Firefox可以正常工作。 Chrome和Edge扩展到父容器之外。

如果我将flex-grow: 1替换为width: 100%，则可以在Chrome浏览器中使用，但Firefox会将下拉菜单显示为小，并且Edge不会考虑边距。

这是什么问题？