ScrollBars don't show up in Qt Quick ScrollView

Question

I have two ColumnLayout and I want them to be scrollable, however the scroll bar doesn't show up. If I remove one column, it shows up.

The Code:

ApplicationWindow {
    id: applicationWindow1
    visible: true
    width: 400
    height: 500
    title: qsTr("Hello World")

    menuBar: MenuBar {
        Menu {
            title: qsTr("File")
            MenuItem {
                text: qsTr("Exit")
                onTriggered: Qt.quit();
            }
        }
    }

    Item {
        id : scroll;
        anchors.centerIn: parent
    }

    ScrollView {
        anchors.left: parent.left
        anchors.top : parent.top
        id:col1
        width: 240
        height: 618
        anchors.leftMargin: 0
        anchors.topMargin: 0
        contentItem : fl0
        frameVisible :true

        ColumnLayout  {
            id:fl0

            anchors.fill:parent


           Rectangle{
               width:200
               height:200
               color : "#585ef3"
           }
           Rectangle{
               width:200
               height:200
               color : "#585ef3"
           }
           Rectangle{
               width:200
               height:200
               color : "#585ef3"
           }
           Rectangle{
               width:200
               height:200
               color : "#585ef3"
           }
           Rectangle{
               width:200
               height:200
               color : "#585ef3"
           }
        }
    }
    ScrollView {
        width: 240
        height: 626
        anchors.left: col1.right
        anchors.leftMargin: 10
        anchors.top: parent.top
        anchors.topMargin: 0
        contentItem: fl2
        frameVisible :true
        ColumnLayout  {
            id:fl2

            anchors.fill: parent

           Rectangle{
               width:200
               height:200
               color : "#18f32b"
           }
           Rectangle{
               width:200
               height:200
               color : "#585ef3"
           }
           Rectangle{
               width:200
               height:200
               color : "#585ef3"
           }
        }
    }



    }

What am I doing wrong?

Answer 1

You set size of content item to anchors.fill:parent so what scrollbars do you expect?

To make the content scrollable just remove anchor points:

ColumnLayout  {
    id:fl0
    //anchors.fill:parent