如何在Firefox上的弹性框中并排显示两个元素？

Question

我希望在我的网站侧边栏中并排显示两个元素。我有

<form class="searchForm">
  <input type="text" name="search" class="form-control" >
  <input type="submit" value="Search" id="search" name="search" >
</form>

使用以下

设置样式

input {
    margin: 0;
}

.searchForm {
        display: flex;
}

.form-control {
    width: 80%;
}

我的麻烦是虽然这在Chrome上正常显示，但在Firefox上，该按钮正在被切断。我准备了demo。有谁知道我如何在Firefox上显示按钮，就像在Chrome上一样？我尝试更改我的CSS“display：flex;”为“display：block”，但元素出现在不同的水平面上。