max-height & min-height have a weird behaviour

[Antonio225t]

I have something like this:

component CustomComponent inherits VerticalLayout {
    in-out property <bool> expanded: false;

    alignment: start;

    HorizontalLayout {
        preferred-height: 34px;

        ta := TouchArea {
            horizontal-stretch: 1;
            clicked => {expanded = !expanded;}

            Text {
                text: "Click me to show the contents";
            }
        }
    }
    VerticalLayout {
        max-height: root.expanded ? 99999px : 0px; // This doesn't seem to work correctly...
        alignment: start;
        
        @children
    }
}

The contents are shown regardless of root.expanded being true... And that seems because the max-height property is... I don't understand how it works.

max-width, max-height

[length default: 0px]
The maximum size of an element.

That doesn't seem to be the case, is it being ignored? If so why?

[Antonio225t]

I do have a workaround for that:

    // Let's wrap the VerticalLayout in a ScrollView
    ScrollView {
        min-height: root.expanded ? 200px : 0px;

        VerticalLayout {
            preferred-height: root.expanded ? 99999px : 0px;
            alignment: start;
            
            @children
        }
    }

But it looks ugly because now I have a fixed 200px of occupied space even if the @children aren't bigger (or equal) than 200px... And no, I can't use self.viewport-height in the ScrollView like #8564 (reply in thread) because it gives The binding for the property 'min-height' is part of a binding loop.