import QtQuick
import QtQuick.Layouts

Window {
    id: window
    width: 400
    height: 300
    visible: true

    function report(item, fillHeight, preferredHeight) {
        console.log("###", item, "###")
        console.log("Layout.fillHeight:", fillHeight)
        console.log("Layout.preferredHeight:", preferredHeight, '\n')
    }

    component ExpandingRect : Rectangle {
        Layout.fillWidth: true
        Layout.fillHeight: true
        color: "cyan"
    }

    RowLayout {
        anchors.fill: parent

        ColumnLayout {
            ExpandingRect {}
            RowLayout { // ~50% of the window's height (Expected)
                Layout.fillWidth: true
                Layout.fillHeight: true
                Item { Layout.fillHeight: true }
                Component.onCompleted: window.report(this, Layout.fillHeight, Layout.preferredHeight)
            }
        }

        ColumnLayout {
            ExpandingRect {}
            RowLayout { // 25px high (Expected)
                Layout.preferredHeight: 25
                Layout.fillWidth: true
                Item {}
                Component.onCompleted: window.report(this, Layout.fillHeight, Layout.preferredHeight)
            }
        }

        ColumnLayout {
            ExpandingRect {}
            RowLayout { // ~100% of the window's height (NOT Expected)
                Layout.preferredHeight: 25
                Layout.fillWidth: true
                // Layout.fillHeight: false // <-- This line makes it work as expected, even though it should already be false by default!
                Item { Layout.fillHeight: true }
                Component.onCompleted: window.report(this, Layout.fillHeight, Layout.preferredHeight)
            }
        }

    }
}