Row not sizing to fit content

ocgltd

I have defined a couple of QML classes (MyFrame and MyGroup) which contain Rows. I populate the MyFrame row with two MyGroup's, as well as with two rectangles. Each MyGroup also contains two rectangles. When run I only see the green and pink rectangles beside each other as shown below. All of the rectangles in the MyGroup's have 0 width (I think).

If I hard code a width:130 into my MyGroup class, then the MyGroup objects appear as expected as shown below:

Why aren't each of the "MyGroup" objects resizing their width to hold their two rectangles therein? How can I fix MyGroup to resize width to the row contents?

main.qml

import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    width: 1024
    height: 768
    visible: true

    MyFrame {
        MyGroup {
            Rectangle {
                width: 50
                height: 50
                color: "orange"
            }
            Rectangle {
                width: 50
                height: 50
                color: "black"
            }
        }
        MyGroup {
            Rectangle {
                width: 50
                height: 50
                color: "red"
            }
            Rectangle {
                width: 50
                height: 50
                color: "blue"
            }
        }
        Rectangle {
            width: 60
            height: 60
            color: "green"
        }
        Rectangle {
            width: 60
            height: 60
            color: "pink"
        }
    }

}

MyFrame.qml

import QtQuick 2.0
Rectangle {
    default property alias contents: frameContents.children
    anchors {
        top: parent.top
        left: parent.left
        right: parent.right
    }
    height: 100
    Row {
        anchors {
            fill: parent
            margins: 5
        }
        id: frameContents
    }
}

MyGroup.qml

import QtQuick 2.0

Item {
    default property alias contents: groupContents.children
    anchors {
        top: parent.top
        bottom: parent.bottom
    }
    Row {
        anchors {
            fill: parent
        }
        id: groupContents
        spacing: 5
    }
}

fcarney

Don't use anchors.fill for Row and Column or any other container that changes its size according to context. Specify the height on Row. You should be seeing runtime warnings in the Application Output.