显示固定大小的小部件的网格，使其水平地适合QScrollArea

Question

我想在Qt应用程序的右侧显示一长串图像。我创建了QScrollArea，但是当我尝试网格布局时，它试图扩展项目并且不换行：

我创建了一个简单的CSS / HTML演示，该演示演示了我想在Qt / C ++中执行的操作。当您将鼠标移到演示上时，可以观察到项目如何整齐地环绕它们与顶部对齐的方式。

document.body.addEventListener("mousemove", (e)=>{
    document.querySelector("#QScrollArea").style.width = e.clientX+"px";

})

* {box-sizing: content-box;}
body,html,#QScrollArea {
    margin: 0px;
    padding: 0px;
}
#QScrollArea {
    border: 1px solid black;
    overflow-y: auto;
    max-height: 99vh;
    height: 99vh;
    overflow-x: hidden;
    display: flex;
    flex-flow: row wrap;
    align-content: start;
}
.PictureWidget {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: green;
    margin: 2pt;
    border: 1px solid black;
}

<div id="QScrollArea">
    <div class="PictureWidget">
        
    </div>
    <div class="PictureWidget" style="background-color:#1144ee">
        
    </div>
    <div class="PictureWidget" style="background-color:#FFAA11">
        
    </div>
    <div class="PictureWidget" style="background-color:#FF5511">
        
    </div>
    <div class="PictureWidget" style="background-color:#005511">
        
    </div>
    <div class="PictureWidget" style="background-color:#7799ff">
        
    </div>
    <div class="PictureWidget" style="background-color:#ffff00">
        
    </div>
    <div class="PictureWidget" style="background-color:#ff00ff">
        
    </div>
    <div class="PictureWidget" style="background-color:#333300;color: white">
        
    </div>
    <div class="PictureWidget" style="background-color:#ffaaaa">
        
    </div>
    <div class="PictureWidget" style="background-color:#111199;color: white">
        
    </div>
</div>

如何复制上面使用Qt / C ++创建的演示的行为？