CSS tie breaker

sandbox/will/just_a_box.css

@@ -0,0 +1,24 @@
+Screen {
+    background: lightcoral;
+}
+
+#left_pane {
+    background: red;
+    width: 30;
+    height: auto;
+}
+
+#middle_pane {
+    background: green;
+    width: 140;
+}
+
+#right_pane {
+    background: blue;
+    width: 30;
+}
+
+.box {
+    height: 5;
+    width: 15;
+}

sandbox/will/just_a_box.py

@@ -0,0 +1,43 @@
+from __future__ import annotations
+
+from rich.console import RenderableType
+from rich.panel import Panel
+
+from textual import events
+from textual.app import App, ComposeResult
+from textual.layout import Container, Horizontal, Vertical
+from textual.widget import Widget
+
+
+class Box(Widget, can_focus=True):
+    CSS = "#box {background: blue;}"
+
+    def render(self) -> RenderableType:
+        return Panel("Box")
+
+
+class JustABox(App):
+    def compose(self) -> ComposeResult:
+
+        yield Horizontal(
+            Vertical(
+                Box(id="box1", classes="box"),
+                Box(id="box2", classes="box"),
+                id="left_pane",
+            ),
+            id="horizontal",
+        )
+
+    def key_p(self):
+        for k, v in self.app.stylesheet.source.items():
+            print(k)
+        print(self.query_one("#horizontal").styles.layout)
+
+    async def on_key(self, event: events.Key) -> None:
+        await self.dispatch_key(event)
+
+
+app = JustABox(css_path="just_a_box.css", watch_css=True)
+
+if __name__ == "__main__":
+    app.run()