How to access @children's size?

[Enyium]

Consider this code:

import { Button } from "std-widgets.slint";

component Container inherits Rectangle {
    background: pink;

    Rectangle {
        width: 100px; // How to use `@children`'s size?
        height: 100px;
        background: lime;

        @children
    }
}

export component Demo {
    width: 300px;
    height: 300px;

    Container {
        Button { text: "Foo"; }
    }
}

How can I bind to @children's size, so that the lime-colored surface is as large as them?

[felipetesc]

The thing is, do you actually need @children's size to make as large as them ?

import { Button } from "std-widgets.slint";

component Container inherits Rectangle {
    background: pink;
    in-out property inner-width<length> : outerRect.width;
    n-out property inner-height<length> : outerRect.height;
    
     outerRect := Rectangle {
        width: 100px; // How to use `@children`'s size?
        height: 100px;
        background: lime;
        innerRect := Rectangle{
                  width: root.inner-width;
                  height:  root.height;
                  background: parent.background;
                  @children
        }
        
    }
}

export component Demo {
    width: 300px;
    height: 300px;

    Container {
        inner-width: bt.width;
        inner-height: bt.height;
        bt := Button { text: "Foo"; }
    }
}

or something like that ....

[ogoffart]

i'd use a layout:

Rectangle {
        width: l.preferred-width;
        height: l.preferred-height;
        background: lime;
        l := VerticalLayout {  @children }
}

[Enyium]

I think, looking forward, a CellLayout would be the go-to solution for this. See #4800 (comment).