Horizontal(Button) is not showing correctly in VerticalScroll

[tibetsam]

Have you checked closed issues? (https://github.com/Textualize/textual/issues?q=is%3Aissue+is%3Aclosed)
yes
Have you checked against the most recent version of Textual? (https://pypi.org/search/?q=textual)
yes

The bug

from textual.app import App, ComposeResult
from textual.containers import Horizontal, VerticalScroll
from textual.screen import Screen
from textual.widgets import Placeholder, Button


class Header(Placeholder):
    DEFAULT_CSS = """
    Header {
        height: 3;
        dock: top;
    }
    """


class Footer(Placeholder):
    DEFAULT_CSS = """
    Footer {
        height: 3;
        dock: bottom;
    }
    """

class TweetButton(Button):
    DEFAULT_CSS = """
    TweetButton {
        margin: 1;
    }
    """


class Column(Horizontal):
    def compose(self) -> ComposeResult:
        for tweet_no in range(1, 5):
            yield TweetButton(f"Tweet{tweet_no}", id=f"Tweet{tweet_no}")


class TweetScreen(Screen):
    def compose(self) -> ComposeResult:
        yield Header(id="Header")
        yield Footer(id="Footer")
        with VerticalScroll():
            for _ in range(1,30):
                yield Column()


class LayoutApp(App):
    def on_ready(self) -> None:
        self.push_screen(TweetScreen())


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

[github-actions[bot]]

We found the following entry in the FAQ which you may find helpful:

• Why do some key combinations never make it to my app?

Feel free to close this issue if you found an answer in the FAQ. Otherwise, please give us a little time to review.

This is an automated reply, generated by FAQtory

[willmcgugan]

Your Column will inherits the Horizontal container. Horizontals will divide the height amongst other container. i.e. if you have 30 columns, they will divide the height in to 30 pieces.

Set the height of your Column to auto. Or replace with a HorizontalGroup

[tibetsam]

Hi @willmcgugan , thanks a lot for the tips! HorizontalGroup worked well. May i ask an additional question on button? When never i change button size less 3, the label of button is unable to see, is there any additional parameter i have to set like label = auto? sorry, i couldn't find it in https://textual.textualize.io/widgets/button/