设置max-height与overflow的flex容器顶部元素无法访问问题

你遇到的顶部元素溢出、无法滚动到最顶部的问题，是flex多行滚动场景下的典型布局问题：
给设置了overflow-y: auto的换行flex容器添加align-content: space-around属性时，浏览器会把容器溢出可视区的所有内容都纳入间距计算范围，最终分配到第一行元素上方的间距会把元素推出容器可视区域，且滚动条无法覆盖到这部分被推出的区域，导致顶部内容无法访问。
你之前尝试把滚动属性迁移到list__products容器时没有生效，是因为内层.products仍然保留了max-height和align-content属性，双层容器的空间计算逻辑冲突才会导致内容无法滚动。

直接调整CSS规则即可，不需要修改HTML结构：

.main__new .list__products{
    width: 36vw;
    /* 把高度限制、滚动属性移到外层容器 */
    max-height: 70vh;
    overflow-y: auto;
    margin: 1.5vh 0;
    /* 可选：添加内边距避免内容紧贴滚动条 */
    padding: 0 0.5vw;
}

.main__new .products{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    width: 100%;
    /* 移除原有max-height、align-content属性，用gap控制元素间距，数值可根据设计需求调整 */
    gap: 2vh 1vw;
}

• 把滚动逻辑和flex布局逻辑拆分到两层容器，避免flex间距计算和滚动区域计算冲突
• 用gap属性替代align-content: space-around实现元素间的均匀间距，不会出现溢出裁切问题
• 修复后无论加载多少个产品，第一行元素始终在滚动区域可视范围内，滚动条可以完整覆盖所有内容，所有产品链接都可正常点击访问

内容的提问来源于stack exchange，提问作者Mateo_Manchola12