When fr dimensions have a min or max, they should yield their space to flexible units

[davep]

There might be other combinations that result in this, but this is a minimal version of the problem that has been observed in the markdown viewer. Consider this code:

from textual.app        import App, ComposeResult
from textual.containers import Horizontal, Vertical, VerticalScroll
from textual.widgets    import Header, Footer, Static

class ScreenSplitApp( App[ None ] ):

    CSS = """
    Horizontal {
        width: 1fr;
    }

    Vertical {
        width: 1fr;
        background: red;
        min-width: 42;
    }

    VerticalScroll {
        width: 3fr;
        background: $panel;
    }

    Static {
        width: 1fr;
        content-align: center middle;
        border: double red;
    }

    Static.stripe-0 {
        background: green;
    }

    Static.stripe-1 {
        background: blue;
    }
    """

    def compose( self ) -> ComposeResult:
        yield Header()
        with Horizontal():
            yield Vertical()
            with VerticalScroll():
                for n in range( 500 ):
                    yield Static( f"This is content number {n}", classes=f"stripe-{n % 2}" )
        yield Footer()

if __name__ == "__main__":
    ScreenSplitApp().run()

When the terminal is wide enough that the min-width on the Vertical isn't activated, the VerticalScroll has its scrollbar and works as would be expected:

However, if the terminal is narrowed enough that the min-width kicks in on the Vertical on the left, the VerticalScroll on the right drops its scrollbar (or perhaps retains it but it's off the screen) and the content starts to get cropped.

[willmcgugan]

from textual.app import App, ComposeResult
from textual.containers import Horizontal, Vertical, VerticalScroll
from textual.widgets import Header, Footer, Static


class ScreenSplitApp(App[None]):
    CSS = """
    Horizontal {
        width: 1fr;        
    }

    Vertical {
        width: 1fr;
        background: blue;
        min-width: 20;
    }

    VerticalScroll {
        width: 3fr;
        background: $panel;
    }

    Static {
        width: 1fr;
        content-align: center middle;
    }

    """

    def compose(self) -> ComposeResult:
        yield Header()
        with Horizontal():
            yield Vertical()
            with VerticalScroll():
                for n in range(500):
                    yield Static(f"This is content number {n}")
        yield Footer()


if __name__ == "__main__":
    ScreenSplitApp().run()

[willmcgugan]

What appears to be happening is that when a fr unit reaches its minimum, it is still treated as a fraction - so the remaining fr units won't shrink.

@davep In the meantime, I think you should dock the sidebar to a fixed width.

[github-actions]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.