Firefox中的CSS Flexbox问题

试图使用flexbox在按钮旁边显示搜索输入和按钮（分组）

<div class="border-r border-gray-900 flex px-6 py-3 w-64">
  <div class="flex flex-grow">
      <input class="border flex-grow w-full" type="search" />
      <button class="bg-blue-500 p-3">search</button>
  </div>
  <button class="bg-blue-500 p-3">+</button>
</div>

搜索
+

出于某种原因，这在chrome中运行良好，但在firefox中内容重叠

如何在firefox中修复此问题？ 或者有没有其他方法可以让我达到同样的效果

---

添加最小宽度：1px；输入字段

在firefox和Chrome中的工作方式似乎相同：

<div class="border-r border-gray-900 flex px-6 py-3 w-max">
      <input class="border" type="search" />
      <button class="bg-blue-500 p-3">search</button>
      <button class="bg-blue-500 p-3">+</button>
</div>

搜索
+

它看起来像你的，我想，唯一的区别是输入变长了一点，但是你可以用

w-

类来解决这个问题