reactive.qml

Cool showcase of qml layout simplicity

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
import QtQuick.Window 2.12

Window {
    width: column.width
    height: column.height * 1.5

    Column {
        id: column
        ScrollView {
            height: contentHeight + ScrollBar.horizontal.height
            width: parent.width
            clip: true

            RowLayout {
                width: Math.max(50 + slider.value + spacing, 500)

                Rectangle {
                    color: "red"
                    height: 50

                    Layout.fillWidth: false
                    Layout.preferredWidth: slider.value + 5
                }
                Rectangle {
                    color: "blue"
                    height: 50

                    Layout.fillWidth: true
                    Layout.minimumWidth: 50
                }
            }
        }
        Slider {
            id: slider
            from: 0
            to: 500
            width: 300
        }
    }
}