Firefox 中的 CSS Flexbox 问题答案

【问题标题】：CSS Flexbox issue in FirefoxFirefox 中的 CSS Flexbox 问题
【发布时间】：2021-03-26 13:30:05
【问题描述】：

尝试使用 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

【问题讨论】：

标签： css firefox flexbox

【解决方案1】：

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

【讨论】：

【解决方案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- classes 修复它

【讨论】：