fix(element/scrollable): support deriving Container size of scrollable

examples/demo.zig

@@ -59,7 +59,9 @@ pub fn main() !void {
         .layout = .{
             .gap = 1,
             .padding = .vertical(2),
+            .direction = .vertical,
         },
+        .size = .{ .y = 90 },
     }, .{});
     try box.append(try App.Container.init(allocator, .{
         .rectangle = .{ .fill = .light_green },
@@ -72,10 +74,7 @@ pub fn main() !void {
     }, .{}));
     defer box.deinit();
 
-    var scrollable: App.Scrollable = .{
-        .container = box,
-        .min_size = .{ .x = 60 },
-    };
+    var scrollable: App.Scrollable = .{ .container = box };
 
     var container = try App.Container.init(allocator, .{
         .layout = .{
@@ -92,7 +91,7 @@ pub fn main() !void {
             .color = .light_blue,
             .sides = .all,
         },
-        .size = .{ .x = 200 },
+        .size = .{ .x = 100 },
     }, .{}));
     try container.append(try App.Container.init(allocator, .{
         .rectangle = .{ .fill = .blue },

examples/elements/scrollable.zig

@@ -88,19 +88,25 @@ pub fn main() !void {
     var top_box = try App.Container.init(allocator, .{
         .rectangle = .{ .fill = .blue },
         .layout = .{
-            .gap = 1,
+            .gap = 2,
+            .separator = .{
+                .enabled = true,
+            },
             .direction = .vertical,
             .padding = .vertical(1),
         },
     }, .{});
     try top_box.append(try App.Container.init(allocator, .{
         .rectangle = .{ .fill = .light_green },
+        .size = .{ .y = 30 },
     }, .{}));
     try top_box.append(try App.Container.init(allocator, .{
         .rectangle = .{ .fill = .light_green },
+        .size = .{ .y = 5 },
     }, element));
     try top_box.append(try App.Container.init(allocator, .{
         .rectangle = .{ .fill = .light_green },
+        .size = .{ .y = 2 },
     }, .{}));
     defer top_box.deinit();
 
@@ -143,10 +149,10 @@ pub fn main() !void {
     defer container.deinit();
 
     // place empty container containing the element of the scrollable Container.
-    var scrollable_top: App.Scrollable = .init(top_box, .{ .y = 50 });
+    var scrollable_top: App.Scrollable = .{ .container = top_box };
     try container.append(try App.Container.init(allocator, .{}, scrollable_top.element()));
 
-    var scrollable_bottom: App.Scrollable = .init(bottom_box, .{ .y = 30 });
+    var scrollable_bottom: App.Scrollable = .{ .container = bottom_box };
     try container.append(try App.Container.init(allocator, .{}, scrollable_bottom.element()));
 
     try app.start();