Vertical scrollbar loss in horizontal layout

[davep]

This is a bit of a tricky one to narrow down; it started out with a missing scrollbar in the right-most column of my current pet project, and ended up with a bit of a MRE-making rabbit hole; but I think I got there. Take this code:

from textual.app import App, ComposeResult
from textual.containers import Horizontal
from textual.widgets import OptionList

class MissingScrollbarApp(App[None]):

    CSS = """
    OptionList {
        height: 1fr;
    }

    #left {
        min-width: 25;
    }

    #middle {
        width: 5fr;
    }

    #right {
        min-width: 30;
    }
    """

    def compose(self) -> ComposeResult:
        options = [str(n) for n in range(200)]
        with Horizontal():
            yield OptionList(*options, id="left")
            yield OptionList(*options, id="middle")
            yield OptionList(*options, id="right")

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

The numbers are mostly important, and derive from the layout I had in my application, and are whittled down to what I hope is the bare minimum to reproduce. Also of note is in my app it's two OptionLists and a VerticalScroll in the third column, but the above keeps it simple and has the same effect.

So, given the above, you'd expect a vertical scrollbar on each of the "panels". But, what you actually get is the third one gets cut off:

If I make the terminal sufficiently wide enough, it eventually appears:

I had to drag this out to about 220 characters wide.

There is also an intermediate step, between no scrollbar, and scrollbar, which shows half a scrollbar:

I originally tried to recreate this using just three VerticalScroll but couldn't get the no-scrollbar effect (but did get the half-scrollbar); but as soon as I threw the OptionList into the mix (so perhaps a ScrollView thing?).

Tagging @willmcgugan for triage.

[williballenthin]

Hm, maybe the other Will? I suppose I could take a stab though I wouldn't be particularly efficient at it.

[davep]

@williballenthin Hah! Sorry! for some reason GitHub has decided you need to be at the top of the @will completion.

Yes, @willmcgugan

[github-actions]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.