How to have Text that wraps, has a maximum height, and becomes scrollable if the text goes over that maxiumum height?

I'm trying to set up a Text component that has a maximum height of the window's height divided by three. The source of the text gives it as a single line, so it also needs to wrap once its width exceeds that of the window. Finally, I'd like the text to become scrollable if its height exceeds 1/3 of the window's.

I've also got a ListView below it, and I want the top of the ListView to be right at the bottom of the Text.

So far, I've come up with this:

ColumnLayout {
    anchors.fill: parent
    // anchors.margins: 10

    ScrollView {
        id: descriptionBox
        clip: true
        Layout.fillWidth: true
        Layout.preferredHeight: parent.height / 3
        contentWidth: parent.width

        Text {
            id: descriptionBoxLabel
            text: "Eum id neque possimus inventore similique. Et dolores exercitationem vel dignissimos. Voluptatibus assumenda veniam consequuntur. Harum reprehenderit tempora nostrum. Assumenda unde omnis non sit minima voluptas eligendi eum."
            anchors.left: parent.left
            anchors.right: parent.right
            wrapMode: Text.WordWrap
        }
    }

    ListView {
        id: useListView
        model: ["Apple", "Banana", "Pear", "Watermelon"]
        delegate: CheckDelegate {
            text: modelData
            width: Window.width - 20
        }

        Layout.fillWidth: true
        Layout.fillHeight: true
    }
}

This kind of works, but the Text doesn't become scrollable when I shrink the height of the window, and the top of the ListView isn't lined up with the bottom of the Text.

I am not sure what the original issue is, but, I reworked it to use a Flickable instead of a ScrollView. The difference being you have to be meticulous in setting contentWidth and contentHeight correctly for the ScrollBar to work. I also tweaked the width calculation of your ListView delegate to follow the width of the ListView:

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Page {
    ColumnLayout {
        anchors.fill: parent
        Flickable {
            id: descriptionBox
            Layout.fillWidth: true
            Layout.preferredHeight: Math.min(parent.height / 3, frame.height)
            clip: true
            contentWidth: frame.width
            contentHeight: frame.height
            ScrollBar.vertical: ScrollBar {
                width: 20
                policy: ScrollBar.AlwaysOn
            }            
            Frame {
                id: frame
                width: descriptionBox.width - 20
                Text {
                    id: descriptionBoxLabel
                    text: "Eum id neque possimus inventore similique. Et dolores exercitationem vel dignissimos. Voluptatibus assumenda veniam consequuntur. Harum reprehenderit tempora nostrum. Assumenda unde omnis non sit minima voluptas eligendi eum."
                    width: parent.width
                    wrapMode: Text.WordWrap
                }
            }
        }
        
        ListView {
            id: useListView
            Layout.fillWidth: true
            Layout.fillHeight: true
            model: ["Apple", "Banana", "Pear", "Watermelon"]
            delegate: CheckDelegate {
                text: modelData
                width: ListView.view.width - 20
            }
            ScrollBar.vertical: ScrollBar {
                width: 20
                policy: ScrollBar.AlwaysOn
            }            
        }
    }
}

You can Try it Online!

[EDIT]

To eliminate the white space, modified the Layout height with:

Layout.preferredHeight: Math.min(parent.height / 3, frame.height)