ColumnLayout inside ScrollView doesn't resize its content - qt

Question

Here's how it looks:
Both 3rd and 4th Card are laid out with ColumnLayout. The only difference is ColumnLayout of the 4th Card is inside ScrollView. Here's the main.qml:
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.3
Window {
visible: true
width: 640
height: 480
title: "Test Window"
GridLayout{
anchors.fill: parent
columns: 2
rows: 2
Card{
header: "H1"
ColumnLayout{
Text{text: "text 1"}
Text{text: "text 2"}
Text{text: "text 3"}
}
}
Card{
header: "H2"
Text{text: "text 2"}
}
Card{
header: "H3"
ColumnLayout{
Field{
label: "Name"
placeholder: "name"
}
Field{
label: "Age"
placeholder: "age"
}
}
}
Card{
header: "H4"
ScrollView{
/*
anchors.fill: parent
Layout.fillWidth: true
Layout.fillHeight: true
Layout.minimumWidth: parent.width
Layout.preferredWidth: parent.width
contentWidth: parent.width
width: parent.width
*/
clip: true
ColumnLayout{
//anchors.fill: parent
Field{
label: "Name"
placeholder: "name"
}
Field{
label: "Age"
placeholder: "age"
}
Field{
label: "Address"
placeholder: "address"
}
Field{
label: "Age"
placeholder: "age"
}
Field{
label: "Address"
placeholder: "address"
}
}
}
}
}
}
I've tried with everything commented out in 4th Card, none of those helps! here's the Card.qml:
import QtQuick 2.9
import QtQuick.Controls 2.5
import QtGraphicalEffects 1.0
import QtQuick.Layouts 1.3
Item {
default property alias content: content.children /*content.data*/
property alias header: header.text
property double margin: 10
property double separatorMargin: 5
Layout.fillHeight: true
Layout.fillWidth: true
Layout.margins: 10
Rectangle{
id: rect
anchors.fill: parent
ColumnLayout{
anchors.fill: parent
Text{
id: header
font.bold: true
leftPadding: margin
topPadding: margin
}
Rectangle{
id: separator
Layout.fillWidth: true
Layout.leftMargin: separatorMargin
Layout.rightMargin: separatorMargin
height: 2
border.color: "black"
}
StackLayout {
id: content
Layout.preferredHeight: parent.height
Layout.leftMargin: margin
Layout.rightMargin: margin
}
}
}
DropShadow{
anchors.fill: rect
source: rect
radius: 10
samples: 15
color: "black"
}
}
and here's Field.qml:
import QtQuick 2.9
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.3
RowLayout{
property alias label: label.text
property alias placeholder: field.placeholderText
Label{
id: label
Layout.minimumWidth: 50
}
TextField{
id: field
Layout.fillWidth: true
Layout.preferredHeight: 30
font.pointSize: 12
verticalAlignment: Qt.AlignVCenter
}
}

Answer 1

I don't know why do I get some answers after posting a question!
This has a solution, I'd to add this:
width: Math.max(implicitWidth, scrollview.availableWidth)
inside ColumnLayout.
EDIT
This doesn't work if I add:
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
Here's how it looks with horizontal bar turned off: