ListView cannot be scrolled horizontally.

import QtQuick 2.7
import QtQuick.Controls 2.0

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    Rectangle {
        width: 400;
        height: 300;

        GridView {
            id: list;

            width: parent.width
            height: parent.height
            contentWidth:  parent.width * 4
            contentHeight:   parent.width * 4
            model: 20;
            clip : true
            flickableDirection: Flickable.HorizontalAndVerticalFlick
            delegate: Rectangle {
                height: 50;
                width: parent.width;
                color: (model.index %2 === 0 ? "darkgray" : "lightgray");
            }
            ScrollBar.vertical: ScrollBar{
                contentItem: Rectangle {
                    implicitWidth: 6
                    implicitHeight: 100
                    radius: width / 2
                    color: "black"
                }}
            ScrollBar.horizontal:  ScrollBar{contentItem: Rectangle {
                    implicitWidth: 100
                    implicitHeight: 6
                    radius: width / 2
                    color: "black"
                }}
        }

    }
    Component.onCompleted: {
        console.log("WIdth : "+list.width + "ContentWidth : "+list.contentWidth);
        console.log("Height :"+list.height + "COntentHeight : "+list.contentHeight)
        console.log( "Width Ratio : "+ list.visibleArea.widthRatio);
        console.log("Height Ratio : "+list.visibleArea.heightRatio);
    }
}