FireFox中的Flex兼容性问题

在项目中使用elementUI的datePicker，代码如下：

        <el-date-picker
          type="daterange"
          :clearable="false"
          start-placeholder="Begin Date"
          end-placeholder="End Date"
          :default-time="['00:00:00', '23:59:59']"
        >
        </el-date-picker>

因为UI设计出来的效果是这样的：

和elementUI的效果有些不同，那个日历的小图标放在了后面。

所以样式做了一些设置，css代码如下：

.el-date-editor--daterange
  .el-range__icon.el-icon-date
    display: none  // 把elementUI默认显示在前面的日历小图标隐藏
  .el-range-input
    flex 1  // 两个输入框平均分配占满剩余空间
  .el-input__icon.el-range__close-icon
    font-style: normal
    font-size: 16px
    width: 16px
    &::after
      font-family: "element-icons" !important
      content: "\e78e"  // 把后面的那个小图标改成日历小图标
      width: auto

在chrome浏览器下正如UI的要求来显示，但是在firefox下显示却如下图：

日历小图标被挤出去了。

后来发现是flex的问题，把 flex: 1 修改成 flex-grow: 1 则可让firefox的显示和chrome一样了。css代码如下：

.el-date-editor--daterange
  .el-range__icon.el-icon-date
    display: none  // 把elementUI默认显示在前面的日历小图标隐藏
  .el-range-input
    flex-grow 1  // 两个输入框平均分配占满剩余空间，这里用flex-grow而不用flex，是为了兼容firefox
  .el-input__icon.el-range__close-icon
    font-style: normal
    font-size: 16px
    width: 16px
    &::after
      font-family: "element-icons" !important
      content: "\e78e"  // 把后面的那个小图标改成日历小图标
      width: auto