Flexbox 中的项目由于全宽项目而被压扁

Question

我有一个由一个输入框和两个圆形 div 组成的 flexbox。我希望输入字段占据圆 div 不需要的所有 space，因此我给它分配了一个 w-full.

但是，输入字段占用的空间比应有的 space 多，实际上导致 div 被压扁，而不是正确的圆圈。

图片：

代码：

<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

Answer 1

如果您希望它增长到全部可用 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

Flexbox 中的项目由于全宽项目而被压扁

Items in Flexbox get Squished due to Full Width Item

css

tailwind-css