CSS Flexbox issue in Firefox

Question

Attempting to show a search input and button (grouped) next to a button using 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>

For some reason this works nicely in chrome, but the content overlaps in firefox.

How can I fix this to work in firefox? Or is there another workaround that I could use to get the same effect?

https://play.tailwindcss.com/QbrWi7mSxm

AlenM92 · Accepted Answer · 2020-12-15 22:07:24Z

1

Add min-width: 1px; to input field

answered Dec 15, 2020 at 22:07

AlenM92

434 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dario Piotrowicz · Accepted Answer · 2020-12-15 23:07:24Z

0

This seems to be working the same in firefox and 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>

and it looks like yours I think, the only difference is that the input gets a bit longer, but you can fix that with w- classes

answered Dec 15, 2020 at 23:07

Dario Piotrowicz

1,1421 gold badge10 silver badges18 bronze badges

Collectives™ on Stack Overflow

CSS Flexbox issue in Firefox

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related