Problem with percentage width and flex layout in nicegui and tailwindcss

Question

I want to make a flex layout with nicegui. I stumbled over a weird behavior when using percentage sizes. Can anyone please point out, what I did wrong?

Here is a minimal example, where I expected the two red boxes to be next to each other. However, the second box is below the first one. Only when I remove the gap-1 class, the boxes are next to each other.

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")

So I thought, the nicegui css-classes might be the problem, but I can reproduce the same behavior with tailwindcss directly:

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>
  """
)

You can even paste the above html code into the https://play.tailwindcss.com/ and see that the boxes are in the same line

A workaround is this code. Somehow the tailwind behavior that calculates the width of elements including the margin is not preserved in nicegui.

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")
    ui.label("Wurst").classes("w-[calc(50%-2px)] bg-red")
    ui.label("Wurst").classes("w-[calc(50%-2px)] bg-red")
    ui.label("Wurst").classes("w-[calc(50%-2px)] bg-red")

Answer 1

The problem is that 50% + gap + 50% is more than 100%. Therefore the flex layout automatically wraps the second box onto the next "line".

You can avoid this behavior using the Tailwind class "no-wrap":

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