CSS Firefox 中的 Flexbox 问题

Question

正在尝试使用 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 中工作？或者我可以使用另一种解决方法来获得相同的效果吗？

https://play.tailwindcss.com/QbrWi7mSxm

Answer 1

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

Answer 2

这在 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- 类

来解决这个问题

CSS Firefox 中的 Flexbox 问题

CSS Flexbox issue in Firefox

css

firefox

flexbox