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

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();