Skip to content

Overflow

The overflow rule specifies if and when scrollbars should be displayed on the x and y axis. The rule takes two overflow values; one for the horizontal bar (x-axis), followed by the vertical bar (y-axis).

The default value for overflow is "auto auto" which will show scrollbars automatically for both scrollbars if content doesn't fit within container.

Overflow may also be set independently by setting the overflow-x rule for the horizontal bar, and overflow-y for the vertical bar.

Syntax

overflow: [auto|hidden|scroll];
overflow-x: [auto|hidden|scroll];
overflow-y: [auto|hidden|scroll];

Values

Value Description
auto (default) Automatically show the scrollbar if content doesn't fit
hidden Never show the scrollbar
scroll Always show the scrollbar

Example

Here we split the screen in to left and right sections, each with three vertically scrolling widgets that do not fit in to the height of the terminal.

The left side has overflow-y: auto (the default) and will automatically show a scrollbar. The right side has overflow-y: hidden which will prevent a scrollbar from being shown.

from textual.app import App
from textual.widgets import Static
from textual.containers import Horizontal, Vertical

TEXT = """I must not fear.
Fear is the mind-killer.
Fear is the little-death that brings total obliteration.
I will face my fear.
I will permit it to pass over me and through me.
And when it has gone past, I will turn the inner eye to see its path.
Where the fear has gone there will be nothing. Only I will remain."""


class OverflowApp(App):
    def compose(self):
        yield Horizontal(
            Vertical(Static(TEXT), Static(TEXT), Static(TEXT), id="left"),
            Vertical(Static(TEXT), Static(TEXT), Static(TEXT), id="right"),
        )


app = OverflowApp(css_path="overflow.css")
Screen {
    background: $background;
    color: black;
}

Vertical {
    width: 1fr;
}

Static {
    margin: 1 2;  
    background: green 80%;  
    border: green wide;
    color: white 90%;
    height: auto;
}    

#right {
    overflow-y: hidden;
}

OverflowApp ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ I must not fear.I must not fear. Fear is the mind-killer.Fear is the mind-killer. Fear is the little-death that Fear is the little-death that  brings total obliteration.brings total obliteration. I will face my fear.I will face my fear. I will permit it to pass over meI will permit it to pass over me  and through me.and through me. And when it has gone past, I And when it has gone past, I will  will turn the inner eye to see turn the inner eye to see its  its path.▁▁path. Where the fear has gone there Where the fear has gone there will will be nothing. Only I will be nothing. Only I will remain. remain.▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔ ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔ ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁I must not fear. I must not fear.Fear is the mind-killer. Fear is the mind-killer.Fear is the little-death that  Fear is the little-death that brings total obliteration. brings total obliteration.I will face my fear. I will face my fear.I will permit it to pass over me  I will permit it to pass over meand through me.

CSS

/* Automatic scrollbars on both axes (the default) */
overflow: auto auto;

/* Hide the vertical scrollbar */
overflow-y: hidden;

/* Always show the horizontal scrollbar */
overflow-x: scroll;

Python

# Hide the vertical scrollbar
widget.styles.overflow_y = "hidden"

# Always show the horizontal scrollbar
widget.styles.overflow_x = "scroll"