How to use TabbedContent and TabPane

[ankraft]

This is a followup on issue #2385.
I currently use Tabs for the tab bar and ContentSwitcher to switch between content views. This works fine in 0.20.1 and 0.22.0. I am trying now to move to TabbedContent and TabPane instead.
The content shown for the tabs is usually a Vertical container with a complex sub-structure. With TabPane I have the problem that using a Vertical container (or any container class) as a child the result seems unpredictable missing children from the Vertical container.
I tried to isolate the problem but found more cases where there are problems (using version 0.22.0):

from textual.app import App, ComposeResult
from textual.widgets import TabbedContent, TabPane,Label, Static
from textual.containers import Vertical, Horizontal

class ExampleApp(App):

    def compose(self) -> ComposeResult:
        with TabbedContent():

            with TabPane('a'):
                yield Label('1')
                yield Label('2')
                yield Label('3')
            
            with TabPane('b'):
                with Vertical():
                    yield Label('1')
                    yield Label('2')
                    yield Label('3')

            with TabPane('c'):
                with Vertical():
                    with Horizontal():
                        yield Label('1')
                    with Horizontal():
                        yield Label('2')
                    with Horizontal():
                        yield Label('3')

            with TabPane('d'):
                yield Label('1')
                with Vertical():
                    yield Label('2')
                    yield Label('3')
                yield Label('4')

if __name__ == '__main__':
    app = ExampleApp()
    app.run()

The output for the different tabs looks like this:

I am a bit confused by the the different results. What am I doing wrong?

[davep]

I suspect the recent changes/tidying up of containers has thrown off ContentSwitcher and/or how TabbedContent and the other constituent parts play together. You can likely begin to see some of the issues if you take your code and add:

    CSS = """
    TabbedContent ContentSwitcher {
        border: solid red;
    }
    """

doing something like the following, for the purposes of your example code, should improve things for now:

    CSS = """
    TabbedContent ContentSwitcher {
        height: 1fr;
    }
    """

Likely set the height to whatever makes sense for your app. I'll raise an issue to remind us to revisit this and review the most appropriate parent class for the various parts.

[davep]

I've raised #2411 to remind us to look back over this in light of the tidying up of containers.

[ankraft]

Great! Thanks a lot for the quick help. I can confirm that a '1fr' CSS "patch" works fine.
Also thanks for raising the issue. I am glad if the example code can be of any help.