通过 Tailwind CSS 转换，输入字段在焦点上扩展至视图之外

Question

我正在使用 Tailwind CSS 开发一个布局，其中输入字段在焦点上扩展其宽度。然而，当输入字段展开时，它的一部分在转换过程中会离开屏幕，尽管完成转换后看起来不错。我希望使过渡顺利，而又不会导致输入离开屏幕。这是代码的相关部分：

<div class="flex justify-between">
  <span>Hello</span>
  <div class="flex gap-2">
      <div class="sm:mr-auto">
        <div class="relative">
          <input
            type="text"
            class="w-full rounded-md border border-slate-300/70 bg-white px-9 py-2 text-sm font-semibold text-black !outline-none transition-all duration-1000 ease-out placeholder:tracking-widest focus:w-96 focus:border-primary focus:ring-transparent sm:bg-transparent sm:pr-4"
            placeholder="Search..."
          />
        </div>
      </div>
    </div>
</div>

现场演示可在此处：Tailwind Play

如何修改 CSS，以便输入字段在转换过程中保持可见并正确定位在屏幕边界内？ Tailwind CSS 是否有用于管理 Flex 容器中的扩展元素的最佳实践？

Answer 1

使用

max-w-full

代替

w-full

。

https://play.tailwindcss.com/wUjptqOYhb