Add examples for min/max width/height.

docs/examples/styles/max_height.css

@@ -0,0 +1,25 @@
+Horizontal {
+    height: 100%;
+    width: 100%;
+}
+
+Placeholder {
+    height: 100%;
+    width: 1fr;
+}
+
+#p1 {
+    max-height: 10w;
+}
+
+#p2 {
+    max-height: 999;  /* (1)! */
+}
+
+#p3 {
+    max-height: 50%;
+}
+
+#p4 {
+    max-height: 10;
+}

docs/examples/styles/max_height.py

@@ -0,0 +1,16 @@
+from textual.app import App
+from textual.containers import Horizontal
+from textual.widgets import Placeholder
+
+
+class MaxHeightApp(App):
+    def compose(self):
+        yield Horizontal(
+            Placeholder("max-height: 10w", id="p1"),
+            Placeholder("max-height: 999", id="p2"),
+            Placeholder("max-height: 50%", id="p3"),
+            Placeholder("max-height: 10", id="p4"),
+        )
+
+
+app = MaxHeightApp(css_path="max_height.css")

docs/examples/styles/max_width.css

@@ -0,0 +1,25 @@
+Horizontal {
+    height: 100%;
+    width: 100%;
+}
+
+Placeholder {
+    width: 100%;
+    height: 1fr;
+}
+
+#p1 {
+    max-width: 50h;
+}
+
+#p2 {
+    max-width: 999;  /* (1)! */
+}
+
+#p3 {
+    max-width: 50%;
+}
+
+#p4 {
+    max-width: 30;
+}

docs/examples/styles/max_width.py

@@ -0,0 +1,16 @@
+from textual.app import App
+from textual.containers import Vertical
+from textual.widgets import Placeholder
+
+
+class MaxWidthApp(App):
+    def compose(self):
+        yield Vertical(
+            Placeholder("max-width: 50h", id="p1"),
+            Placeholder("max-width: 999", id="p2"),
+            Placeholder("max-width: 50%", id="p3"),
+            Placeholder("max-width: 30", id="p4"),
+        )
+
+
+app = MaxWidthApp(css_path="max_width.css")

docs/examples/styles/min_height.css

@@ -0,0 +1,26 @@
+Horizontal {
+    height: 100%;
+    width: 100%;
+    overflow-y: auto;
+}
+
+Placeholder {
+    width: 1fr;
+    height: 50%;
+}
+
+#p1 {
+    min-height: 25%;  /* (1)! */
+}
+
+#p2 {
+    min-height: 75%;
+}
+
+#p3 {
+    min-height: 30;
+}
+
+#p4 {
+    min-height: 40w;
+}

docs/examples/styles/min_height.py

@@ -0,0 +1,16 @@
+from textual.app import App
+from textual.containers import Horizontal
+from textual.widgets import Placeholder
+
+
+class MinHeightApp(App):
+    def compose(self):
+        yield Horizontal(
+            Placeholder("min-height: 25%", id="p1"),
+            Placeholder("min-height: 75%", id="p2"),
+            Placeholder("min-height: 30", id="p3"),
+            Placeholder("min-height: 40w", id="p4"),
+        )
+
+
+app = MinHeightApp(css_path="min_height.css")

docs/examples/styles/min_width.css

@@ -0,0 +1,26 @@
+Vertical {
+    height: 100%;
+    width: 100%;
+    overflow-x: auto;
+}
+
+Placeholder {
+    height: 1fr;
+    width: 50%;
+}
+
+#p1 {
+    min-width: 25%;  /* (1)! */
+}
+
+#p2 {
+    min-width: 75%;
+}
+
+#p3 {
+    min-width: 100;
+}
+
+#p4 {
+    min-width: 400h;
+}

docs/examples/styles/min_width.py

@@ -0,0 +1,16 @@
+from textual.app import App
+from textual.containers import Vertical
+from textual.widgets import Placeholder
+
+
+class MinWidthApp(App):
+    def compose(self):
+        yield Vertical(
+            Placeholder("min-width: 25%", id="p1"),
+            Placeholder("min-width: 75%", id="p2"),
+            Placeholder("min-width: 100", id="p3"),
+            Placeholder("min-width: 400h", id="p4"),
+        )
+
+
+app = MinWidthApp(css_path="min_width.css")