Q:

How to make an item fill all available vertical space in QML?

I have a Page with a header (PageTitle item) and a footer (Button) and I did not find a better solution how to make an item (Flickable) fill all the window client area (the vertical space between the header and footer) than calculating its height as follows:
import QtQuick 2.7
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3
import QtQuick.Controls.Styles 1.4
import QtQml 2.2

Page {

    id: root

    background: Rectangle {
        color: "transparent"
    }

    function close()
    {
        stack.pop()
        root.destroy(1000)
    }

    function getText()
    {
        var params = scene.gameParams()
        return qsTr("HowToPlay_Key").arg(params.lineLength).arg(params.newCount)
    }

    SystemPalette {
        id: palette
    }

    GroupBox {

        background: Rectangle {
            color: palette.base
        }

        padding: 15
        anchors.fill: parent

        GridLayout {
            rows: 3
            columns: 1
            flow: GridLayout.LeftToRight
            width: parent.width

            PageTitle {
                id: title
                Layout.fillWidth: true
                text: qsTr("How to play")
            }

            Flickable {

                //layout does not help
                //Layout.fillWidth: true
                Layout.fillHeight: true
                //Layout.maximumHeight: root.height - (30 + 10 + title.height + closeButton.height)

                //Using window here is a workaround, the other alternative on mobile in Screen.desktopAvailableWidth/Screen.desktopAvailableHeight
                //Looks like root.width and window.height are zeros when the dialog is created from main's Component.onCompleted handler.
                width: window.width - 30 - 30
                //height: window.height - (30 + title.height + 10 + closeButton.height + 10 + 30)
                flickableDirection: Flickable.VerticalFlick

                TextArea.flickable: TextArea {
                    id: field
                    //height: 300
                    text: root.getText()
                    wrapMode: Label.Wrap
                    readOnly: true
                }

                ScrollBar.vertical: ScrollBar { }
            }

            Button {
                id: closeButton
                Layout.topMargin: 10
                Layout.alignment: Qt.AlignRight
                text: scene.firstRunFlag ? qsTr("Next") : qsTr("Close")
                onClicked: close()
            }
        }
    }
}

Is there a better way (without knowing the header and footer height), like in WPF, for example, where you can easily create grid with 3 rows and make the first and third rows fixed height and the second row auto height?
I tried to use Layout.fillHeight, but got the following (on 360x640 resolution):

The page looks as if the Flickable height is zero.
What can be wrong?

A:

All the Flickable parent elements should have 
anchors.fill: parent

