textual/docs/styles/max_height.md

Max-height

The max-height rule sets a maximum height for a widget.

Syntax

--8<-- "docs/snippets/syntax_block_start.md" max-height: <scalar>; --8<-- "docs/snippets/syntax_block_end.md"

The max-height rule accepts a <scalar> that defines an upper bound for the height of a widget. That is, the height of a widget is never allowed to exceed max-height.

Example

The example below shows some placeholders that were defined to span vertically from the top edge of the terminal to the bottom edge. Then, we set max-height individually on each placeholder.

=== "Output"

```{.textual path="docs/examples/styles/max_height.py"}
```

=== "max_height.py"

```py
--8<-- "docs/examples/styles/max_height.py"
```

=== "max_height.css"

```sass
--8<-- "docs/examples/styles/max_height.css"
```

1. This won't affect the placeholder because its height is less than the maximum height.

CSS

/* Set the maximum height to 10 rows */
max-height: 10;

/* Set the maximum height to 25% of the viewport height */
max-height: 25vh;

Python

# Set the maximum height to 10 rows
widget.styles.max_height = 10

# Set the maximum height to 25% of the viewport height
widget.styles.max_height = "25vh"