Nested containers not laying out correctly

[zeddever]

Hello,

Thank you for the great project. I'm trying the below simple app with nested containers/layouts but it doesn't seem to be laying out correctly. I think it's a relatively straightforward ui layout so I suspect it's a bug. Please share if any thoughts

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


class MainScreen(App):
    def compose(self) -> ComposeResult:
        """Create child widgets for the app."""
        yield Header()
        yield Footer()
        with VerticalScroll():
            for i in range(13):
                with Horizontal():
                    yield Label(f"{i}. lorem ")
                    yield Label("-> ")
                    yield Label("ipsum")

            yield Label("dolor")
            yield Label("dolor")
            yield Label("dolor")
            yield Label("dolor")


if __name__ == "__main__":
    app = MainScreen()
    app.run()

Versions

Name	Value
Textual	0.37.1
Rich	13.5.2

Python

Name	Value
Version	3.11.5
Implementation	CPython

[davep]

By default, Horizontal is height: 1fr. This means all the Horizontal containers are trying their best to share the visible space amongst themselves. If there's not enough space some will end up being height: 0, in effect.

To get what you seem to be looking for, you would style them to be height: auto (so they are tall enough to hold their own content), or perhaps some specific height. For example:

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


class MainScreen(App):

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

    def compose(self) -> ComposeResult:
        """Create child widgets for the app."""
        yield Header()
        yield Footer()
        with VerticalScroll():
            for i in range(13):
                with Horizontal():
                    yield Label(f"{i}. lorem ")
                    yield Label("-> ")
                    yield Label("ipsum")

            yield Label("dolor")
            yield Label("dolor")
            yield Label("dolor")
            yield Label("dolor")


if __name__ == "__main__":
    app = MainScreen()
    app.run()