Блог

Попытка показать поисковый ввод и кнопку (сгруппированную) рядом с кнопкой с помощью 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

Добавьте min-width: 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- помощью классов