Flickable can have its flick incorrectly stolen

import QtQuick 2.0

Flickable {
    width: 400; height: 400

    contentHeight: height
    contentWidth: width * 3

    Row {
        Rectangle { width: 400; height: 400; color: "green" }
        Rectangle {
            width: 400; height: 400; color: "blue"
            clip: true

            Flickable {
                width: parent.width
                height: 200
                anchors.verticalCenter: parent.verticalCenter

                flickableDirection: Flickable.HorizontalFlick
                contentHeight: height
                contentWidth: width + 100

                Rectangle {
                    anchors.fill: parent
                    color: "purple"
                    // uncomment to see issue
                    /*MouseArea {
                        anchors.fill: parent
                        onClicked: console.log("clicked")
                    }*/
                }
            }
        }
        Rectangle { width: 400; height: 400; color: "yellow" }
    }
}