QML Row not sizing to fit contents

Question

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 in the MyGroup then all shows normally as shown below.

Why aren't each of the "MyGroup" objects resizing their width to hold the two rectangles therein? How can I fix my code such that MyGroup resizes to fit its 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"
            }
        }
        MyGroupDivider {}
        MyGroup {
            Rectangle {
                width: 50
                height: 50
                color: "red"
            }
            Rectangle {
                width: 50
                height: 50
                color: "blue"
            }
        }
        MyGroupDivider {}
        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
    }
}