3

I have a flexbox which consists of one input box and two circular divs. I want the input field to take up all the space that the circle divs don't need, hence I assigned it a w-full.

However, the input field takes up more space than it should and in effect causes the divs to be squished and not correct circles.

Image: enter image description here

Code:

<div class="flex w-full p-3 gap-x-2 items-center bg-red-100">
  <input class="w-full h-10 p-2 bg-orange-50 outline-none"></input>
  <div class="w-9 h-9 rounded-full bg-blue-100"> </div>
  <div class="w-9 h-9 rounded-full bg-green-100"></div>
</div>

Tailwind Play Environment

Sam
  • 1,130
  • 12
  • 36
  • 1
    If you zoom in on the image on the two circles, you'll see they're not perfect circles. Furthermore, if inspecting the circle divs in the taillwind play environment shows you that each has dimensions `32.23px * 36px` – Sam Apr 03 '22 at 14:06
  • you need flex-shrink:0 to the div element – Temani Afif Apr 03 '22 at 14:32

1 Answers1

2

Use flex-grow or grow instead of w-full in your input if you want it to grow to all available space.

<input class="grow h-10 p-2 bg-orange-50 outline-none"></input>

https://tailwindcss.com/docs/flex-grow

https://play.tailwindcss.com/3qZYdEORqH

sorold
  • 475
  • 7
  • 17