Update reference for min/max width/height.

docs/styles/max_height.md

@@ -4,18 +4,48 @@ The `max-height` rule sets a maximum height for a widget.
 
 ## Syntax
 
-```
-max-height: <SCALAR>;
-```
+--8<-- "docs/snippets/syntax_block_start.md"
+max-height: <a href="../css_types/scalar.md">&lt;scalar&gt;</a>;
+--8<-- "docs/snippets/syntax_block_end.md"
+
+The `max-height` rule accepts a [`<scalar>`](../css_types/scalar.md) that defines an upper bound for the [`height`](./height.md) of a widget.
+That is, the height of a widget is never allowed to exceed `max-height`.
+
+### Values
+
+--8<-- "docs/snippets/type_syntax/scalar.md"
+
+## 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"
+
+    ```css
+    --8<-- "docs/examples/styles/max_height.css"
+    ```
+
+    1. This won't affect the placeholder because its height is less than the maximum height.
 
 ## CSS
 
 ```sass
-
-/* Set a maximum height of 10 rows */
+/* Set the maximum height to 10 rows */
 max-height: 10;
 
-/* Set a maximum height of 25% of the screen height */
+/* Set the maximum height to 25% of the viewport height */
 max-height: 25vh;
 ```
 
@@ -25,7 +55,6 @@ max-height: 25vh;
 # Set the maximum height to 10 rows
 widget.styles.max_height = 10
 
-# Set the maximum height to 25% of the screen height
+# Set the maximum height to 25% of the viewport height
 widget.styles.max_height = "25vh"
-
 ```