Tailwind CSS中无法最大化输入框宽度问题求助

云上老周

2026-6-17

解决方案

问题根源在于父div的[&>*]:flex-none样式——它强制所有直接子元素（表单和Clear按钮）使用flex:none，无法自动伸缩，导致输入框的宽度设置被限制。要实现输入框占满按钮外的剩余宽度，按以下步骤修改：

1. 调整父div的flex子元素规则

要么移除全局的[&>*]:flex-none，要么给表单单独设置flex-grow:1来覆盖该限制：

方案一：移除全局`flex-none`限制

修改后的父div代码：

<div
  class="p-5 flex gap-2 relative z-10 overflow-x-auto #{@class}"
  style="border-top-width: 1px !important; border-bottom-width: 1px !important;"
>
  <%= render_slot(@inner_block) %>
</div>

方案二：保留全局规则，单独给表单加扩展权限

父div代码不变，后续给表单添加flex-grow类即可。

2. 让输入框占满表单宽度

给表单设置w-full，同时让输入框也铺满容器：

修改后的内部表单及按钮代码：

<.form
  :let={form}
  for={to_form(%{"query" => @search_by_query})}
  phx-submit="search_by_query"
  phx-change="on_change_search_by_query"
  class="flex-grow w-full"
>
  <.input
    field={form[:query]}
    placeholder="index: 'cashier_withdraw' and status: 'CLOSED' and site_id: '3'"
    size="md"
    class="w-full"
  >
    <:lead><.icon name="search" /></:lead>
  </.input>
</.form>
<.button variant="ghost" phx-click="clear_filters" data-testid="clear-filters">
  Clear
</.button>