Intermediate Horizontal container breaks scrolling

[multimeric]

This is best explained with an example.

The following app works well:

from textual.app import App, ComposeResult
from textual.containers import Horizontal, VerticalScroll
from textual.widgets import Label

class Scroller(App):
    def compose(self) -> ComposeResult:
        with VerticalScroll():
            for i in range(100):
                yield Label(str(i))

Scroller().run()

Note the scrollbar and the correct order of the numbers:

However, as soon as I put each label into a Horizontal container, this breaks:

from textual.app import App, ComposeResult
from textual.containers import Horizontal, VerticalScroll
from textual.widgets import Label

class Scroller(App):
    def compose(self) -> ComposeResult:
        with VerticalScroll():
            for i in range(100):
                with Horizontal():
                    yield Label(str(i))

Scroller().run()

Not only is the scrollbar entirely gone, but it seems to have randomly re-arranged the elements of the vertical layout!

Textual Diagnostics

Versions

Name	Value
Textual	0.26.0
Rich	13.3.5

Python

Name	Value
Version	3.10.6
Implementation	CPython
Compiler	GCC 11.2.0
Executable	/home/users/allstaff/milton.m/.conda/envs/miltonm-base/bin/python

Operating System

Name	Value
System	Linux
Release	3.10.0-1160.88.1.el7.x86_64
Version	#1 SMP Tue Mar 7 15:41:52 UTC 2023

Terminal

Name	Value
Terminal Application	vscode (1.73.0)
TERM	xterm-256color
COLORTERM	truecolor
FORCE_COLOR	Not set
NO_COLOR	Not set

Rich Console options

Name	Value
size	width=109, height=41
legacy_windows	False
min_width	1
max_width	109
is_terminal	True
encoding	utf-8
max_height	41
justify	None
overflow	None
no_wrap	False
highlight	None
markup	None
height	None

Feel free to add screenshots and / or videos. These can be very helpful!

[davep]

By default the height of a Horizontal is 1fr. This means that all of the Horizontals that you yield are going to try and share out the same space as equally as possible. A way to view it is: if your terminal is 50 lines in height, those 100 Horizontals are going to try and equally share the space, and they can't be 0.5 characters in height, so some will be 1 in height and some 0 in height. This is why you're seeing some missing (they're 0 in height) and there's no scrolling (they're all trying to stay within the vertical space of their container).

To get what you want with the code you have, you'd want to be telling Horizontal to be a different height. A good choice might be auto, which means each one will be tall enough to fit its content:

from textual.app import App, ComposeResult
from textual.containers import Horizontal, VerticalScroll
from textual.widgets import Label

class Scroller(App):

    CSS = """
    Horizontal {
        height: auto;
    }
    """

    def compose(self) -> ComposeResult:
        with VerticalScroll():
            for i in range(100):
                with Horizontal():
                    yield Label(str(i))

Scroller().run()

[multimeric]

Thanks, that explains and resolves my issue!