NiceGUI与TailwindCSS中百分比宽度和Flex布局异常问题排查

问题描述 #

在使用NiceGUI构建Flex布局时，添加gap-1类后，两个设置w-1/2的红色标签会换行，移除gap-1则能正常并排。最小复现代码如下：

from nicegui import ui

with ui.row().classes("w-96 gap-1 bg-grey"):
    ui.label("Wurst").classes("w-1/2 bg-red")
    ui.label("Wurst").classes("w-1/2 bg-red")

ui.run(title="test")

即使直接使用纯Tailwind的HTML代码在NiceGUI中运行，问题依然存在：

ui.html(
    """
    <div class="w-96 flex flex-row bg-grey gap-1">
    <div class="w-1/2 bg-red">w-1/2</div>
    <div class="w-1/2 bg-red">w-1/2</div>
    </div>
  """
)

但相同的HTML代码在Tailwind Play中显示正常。临时解决方案是通过calc手动计算元素宽度：

from nicegui import ui

with ui.row().classes("w-96 gap-1 bg-grey"):
    ui.label("Wurst").classes("w-[calc(50%-2px)] bg-red")
    ui.label("Wurst").classes("w-[calc(50%-2px)] bg-red")

问题根源 #

核心原因是NiceGUI默认给Flex子元素（如ui.label）设置了flex-shrink: 0，这意味着子元素不会自动收缩以适应容器空间。当两个w-1/2元素的宽度总和（100%）加上gap-1的间距后，总宽度超过了容器的w-96，而子元素无法收缩，就会触发Flex布局的换行逻辑。

而在纯Tailwind环境中，Flex子元素默认的flex-shrink: 1，当总宽度超出容器时，子元素会自动等比例收缩，刚好容纳在容器内，因此不会换行。

正确解决方案 #

有两种更规范的解决方式，无需手动计算宽度：

方式1：启用子元素的自动收缩能力 #

给子元素添加Tailwind的flex-shrink类，显式设置flex-shrink: 1，让元素可以根据容器空间自动收缩：

from nicegui import ui

with ui.row().classes("w-96 gap-1 bg-grey"):
    ui.label("Wurst").classes("w-1/2 bg-red flex-shrink")
    ui.label("Wurst").classes("w-1/2 bg-red flex-shrink")

ui.run(title="test")

方式2：利用Flex弹性布局特性 #

使用Tailwind的flex-1类替代固定宽度，让子元素自动均分容器剩余空间（已扣除gap）：

from nicegui import ui

with ui.row().classes("w-96 gap-1 bg-grey"):
    ui.label("Wurst").classes("flex-1 bg-red")
    ui.label("Wurst").classes("flex-1 bg-red")

ui.run(title="test")

这种方式更符合Flex布局的设计理念，无需手动处理宽度计算，扩展性更强（比如后续增加子元素数量时，无需修改宽度值）。

内容的提问来源于stack exchange，提问作者Dronakuul