由于全宽度项，Flexbox中的项会被压缩。

Question

我有一个挠曲盒，它由一个输入框和两个圆形div组成。我希望输入字段占用圆div不需要的所有空间，因此我给它分配了一个w-full。

但是，输入字段占用的空间比它应该占用的空间要大，实际上会导致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>

顺风游戏环境

Answer 1

如果您想让输入到所有可用的空间，请使用flex-grow或grow，而不是w-满。

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

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

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