QtQuick Layouts: Why don't the width and height settings affect anything inside the ColumnLayout?

I've been working with QtQuick and have encountered an issue I can't quite wrap my head around.

In the example below, I've set the width and height of the Rectangle directly, expecting it to fill 10% of the parent's height and the full width. But, the Rectangle's size is zero

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

ApplicationWindow {
    width: 640
    height: 480
    visible: true
    title: qsTr("Window")

    ColumnLayout {
        anchors.fill: parent
        Rectangle {
            width: parent.width
            height: parent.height * 0.1
            color: "blue"
        }
    }
}

But when I modify the code to use Layout.preferredWidth and Layout.preferredHeight instead, the Rectangle sizes are as expected:

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

ApplicationWindow {
    width: 640
    height: 480
    visible: true
    title: qsTr("Window")

    ColumnLayout {
        anchors.fill: parent
        Rectangle {
            Layout.preferredWidth: parent.width
            Layout.preferredHeight: parent.height * 0.1
            color: "blue"
        }
    }
}

Could anyone please explain this behavior?

Thank you in advance for your help!

Layouts in QML calculates the size of its children based on the propertyies set for them in the compount Layout property. To get an basic idea of QML Layouts I recommend to read the documentation:

QT Quick Layouts

Especially this section will give you your answere.

And as you already found out, you can not define the congret height and width for an item inside a layout. You have to use other means like preferredWidth and preferredHeight