fix(container): growth options to dynamically size Containers

examples/layouts/mixed.zig

@@ -71,7 +71,12 @@ pub fn main() !void {
                 .rectangle = .{ .fill = .yellow },
             }, .{}));
         } else {
-            try column.append(try App.Container.init(allocator, .{}, .{}));
+            try column.append(try App.Container.init(allocator, .{
+                .size = .{
+                    .dim = .{ .y = 4 },
+                    .grow = .horizontal,
+                },
+            }, .{}));
         }
         try column.append(try App.Container.init(allocator, .{
             .rectangle = .{ .fill = .blue },

src/container.zig

@@ -690,10 +690,10 @@ pub fn Container(comptime Event: type) type {
                 .fixed => this.properties.size.dim,
                 .horizontal => .{
                     .x = @max(size.x, this.properties.size.dim.x),
-                    .y = size.y,
+                    .y = this.properties.size.dim.y,
                 },
                 .vertical => .{
-                    .x = size.x,
+                    .x = this.properties.size.dim.x,
                     .y = @max(size.y, this.properties.size.dim.y),
                 },
             };
@@ -750,18 +750,30 @@ pub fn Container(comptime Event: type) type {
             var growable_children: usize = 0;
             var first_growable_child: *@This() = undefined;
             for (this.elements.items) |*child| {
-                if (child.properties.size.grow != .fixed) {
+                // layout direction side growth
-                    if (growable_children == 0) first_growable_child = child;
+                switch (child.properties.size.grow) {
-                    growable_children += 1;
+                    .fixed => continue,
-
+                    .both => {
-                    switch (layout.direction) {
+                        if (growable_children == 0) first_growable_child = child;
-                        .horizontal => if (child.properties.size.grow != .vertical) {
+                        growable_children += 1;
-                            child.size.y = available;
+                    },
-                        },
+                    .horizontal => if (layout.direction == .horizontal) {
-                        .vertical => if (child.properties.size.grow != .horizontal) {
+                        if (growable_children == 0) first_growable_child = child;
-                            child.size.x = available;
+                        growable_children += 1;
-                        },
+                    },
-                    }
+                    .vertical => if (layout.direction == .vertical) {
+                        if (growable_children == 0) first_growable_child = child;
+                        growable_children += 1;
+                    },
+                }
+                // non layout direction side growth
+                switch (layout.direction) {
+                    .horizontal => if (child.properties.size.grow == .vertical or child.properties.size.grow == .both) {
+                        child.size.y = available;
+                    },
+                    .vertical => if (child.properties.size.grow == .horizontal or child.properties.size.grow == .both) {
+                        child.size.x = available;
+                    },
                 }
             }