移动视图 div，无法在 x 方向滚动 div 的全部内容

如何解决移动视图 div，无法在 x 方向滚动 div 的全部内容

我有一个 div，其中我有多个子 div。因此子 div 是通过 ejs 从 MongoDB 数据库生成的。但是，当我有很多 div 时，我无法滚动父 div 的全长。这是链接：https://henosisprelaunchview.herokuapp.com/henosis/home。在移动视图 (320px) 中查看时，PROJECTS 页面上的缩略图行不允许我滚动浏览其所有内容。最后一项不是完全可见的，所以它最终会剪掉一半的信息：

（该行右侧的图像被截断，但溢出对其余部分效果很好）。

整个过程应该是这样的：

但有时如果只有 4 个项目，在更大的 600 像素屏幕宽度后效果很好。但是，如果您添加更多项目，则不会。我的媒体查询都非常相似，因为所有图像高度和字体大小都发生了变化。

这是我的.html：

<div class="section-projects-thumbnail-mtitle">Other Projects</div>
            
            <div class="section-projects-thumbnail-row">
                <% projectdetails.forEach(item => { %> 
                    <div class="section-projects-thumbnail-col" >
                        <img class="section-projects-thumbnail-img cursor" data-id="<%=item.prjID %>" src="data:<%=item.img.contentType%>;base64,<%=item.img.data.toString('base64')%>" onclick="currentSlide(this)">
                        <div class="section-projects-thumbnail-title-container"><h3 class="section-projects-thumbnail-title"><%= item.projectName %></h3></div>
                        <h4 class="section-projects-thumbnail-date"><%= item.projectDate %></h4>
                    </div> 
                <% }) %> 
            </div> 

这是相关的 .css：

/*The maint-thumbnail row */
.section-projects-thumbnail-row{
    /*
    flex-wrap: Nowrap;
    flex-direction: row;
    */ 
    margin-right: 5%;
    text-transform: uppercase;
    position: absolute;
    top: 99%;
    height: 35%;
    width: fit-content;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: Nowrap;
    Box-sizing: border-Box;
}
.section-projects-thumbnail-row::-webkit-scrollbar {
    display: none;
}

/* Each column in the row */
.section-projects-thumbnail-col {
    flex: 1;
    display: inline-block;
    width: 30%;
    height: 105%;
    margin-right: 3%;
    overflow: hidden;
}

我希望得到一些帮助以及如何解决这个问题。

首先构建移动设备。