How do I create a scrollable qvboxlayout inside qhboxlayout?

See more:

Python

I am using PyQt6 on Python 3.9.5.

I want to split a Window in two parts, the left part is a QTreeWidget and the right part should be a scrollable QVBoxLayout, I plan to add items to the right pane if one item is clicked in the left tree.

I have already implemented the add item part, the items are QGroupBoxs, and the problem is if I keep add items, the right side QVBoxLayout will grow in size and out of the screen, instead of making a scrollbar appear.

Here are the most relevant parts:

class Tree(QTreeWidget):
    def __init__(self):
        super().__init__()
        self.init()
    def init(self):
        self.setColumnCount(4)
        self.setHeaderLabels(['Name', 'Artist', 'Album', 'Title'])
        font = QFont('Noto Serif', 9)
        font.setStyleHint(QFont.StyleHint.Times)
        font.setStyleStrategy(QFont.StyleStrategy.PreferAntialias)
        self.setFont(font)
        self.header().setFont(font)
        for i in range(4):
            self.setColumnWidth(i, 300)
        self.setAutoScroll(True)
        self.setIndentation(32)
        self.setAlternatingRowColors(True)
        self.setUniformRowHeights(True)
        self.itemClicked.connect(self.onItemClicked)
    @pyqtSlot(QTreeWidgetItem)
    def onItemClicked(self, item):
        print('clicked')
        if 'title' in dir(item):
            Window.pagevbox.addWidget(songpage((item.artist, item.album, item.title)))

class songpage(QGroupBox):
    def __init__(self, texts):
        super().__init__()
        self.init(texts)
    
    def init(self, texts):
        vbox = QVBoxLayout()
        artist = QLabel('Artist')
        artistEdit = QTextEdit(texts[0])
        album = QLabel('Album')
        albumEdit = QTextEdit(texts[1])
        title = QLabel('Title')
        titleEdit = QTextEdit(texts[2])
        vbox.addWidget(artist)
        vbox.addWidget(artistEdit)
        vbox.addWidget(album)
        vbox.addWidget(albumEdit)
        vbox.addWidget(title)
        vbox.addWidget(titleEdit)
        self.setLayout(vbox)

class Ui_MainWindow(QMainWindow):
    def __init__(self):
        super().__init__()
        self.resize(1280, 720)
        self.setWindowTitle('tree')
        frame = self.frameGeometry()
        center = self.screen().availableGeometry().center()
        frame.moveCenter(center)
        self.move(frame.topLeft())
        font = QFont()
        font.setFamilies([u"Noto Serif"])
        font.setPointSize(10)
        self.setFont(font)
        self.setStyleSheet(STYLE)
        self.centralWidget = QWidget(self)
        layout = QHBoxLayout(self.centralWidget)
        layout.addWidget(tree)
        vbox.addWidget(button, 1)
        refresh = QPushButton()
        refresh.resize(160,20)
        refresh.setText('Refresh')
        refresh.clicked.connect(add_nodes)
        vbox.addWidget(refresh, 1)
        layout.addLayout(vbox, 0)

Now if I add a plain QVBoxLayout to the QHBoxLayout:

self.pagevbox = QVBoxLayout()
layout.addLayout(self.pagevbox)

The added items will display correctly, except if I keep adding items, the window will grow in size and exceed the height of the screen. And there wouldn't be a scrollbar, making the items out of the screen undisplayable.

So how can I make a scrollable QVBoxLayout inside QHBoxLayout?

What I have tried:

From what I have gathered, QScrollArea can help me do the job, except I don't know exactly how, all the examples I have found are only applicable to the whole window, they are about whole windows, rather than only part of the window.

I have tried many combinations, all but one only display a blank area on the right which remains unchanged.

The sole exception:

self.scrollArea = QScrollArea()
rightpane = QWidget()
self.scrollArea.setWidget(rightpane)
self.pagevbox = QVBoxLayout(rightpane)
layout.addWidget(rightpane)
self.setCentralWidget(self.centralWidget)

When I click on an item, the vbox layout is updated, and the scrollarea appears on the left side and making the tree inaccessible.

So how can I make it actually work?