Width of buttons is not even using fr

[matkudela]

In my project I encountered a problem in width of buttons. My example:
textual_bug_percent.py

from __future__ import annotations

from pathlib import Path

from textual.app import App, ComposeResult
from textual.containers import Horizontal
from textual.widgets import Button, Static


class MyApp(App):
    CSS_PATH = [
        Path(__file__).parent / "textual_bug_percent.scss",
    ]

    def compose(self) -> ComposeResult:
        with Horizontal(id="main"):
            yield Horizontal(Static("One"), id="first")
            yield Horizontal(Static("Three"), id="second")
            with Horizontal(id="third"):
                yield Button("This", variant="success")
                yield Button("is", variant="primary", id="middle-one")
                yield Button("example1", variant="error")

MyApp().run()

textual_bug_percent.scss

#main {
  width: auto;

  Button {
    width: 1fr;
  }
}

#second {
  width: 3fr;
}

#third {
  width: 2fr;
}

#middle-one {
  margin: 0 1;
}

Buttons with 1fr width:

Buttons with 33% width:

As you can see the widths on 1 fr are slightly different, first button is narrower than others, in my opinion they should be even.

[github-actions]

Thank you for your issue. Give us a little time to review it.

PS. You might want to check the FAQ if you haven't done so already.

This is an automated reply, generated by FAQtory

[TomJGooding]

If the total width isn't divisible by 3, how would it be possible for the buttons to be equal?

Look closer at your 33% example and you'll see the middle button is narrower than the others.

[matkudela]

OK, but it's strange that 33% and 1 fr in this case works different, shouldn't it be the same?

[willmcgugan]

3 x 33% doesn't add up to 100%. You could set it to 33.33333333333% but it is always going to suffer from rounding error, compared to fr units.

[matkudela]

Alright, so shouldn't it be possible to do just width: 1/3 to get the same output like with fr - it's not possible using percents right now.

[darrenburns]

@matkudela We don't support fractions as values, and neither does browser CSS unless you use calc AFAIK. If this is something you really want, feel free to open an "Idea" discussion so we can gauge interest! However, 1fr is almost certainly the best approach here since it'll adapt if you add/remove a button without needing to update your CSS.

[github-actions]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.