设置flex-wrap:wrap-reverse的Flex容器在iOS Chrome中无法滚动

针对你遇到的iOS Chrome下flex-wrap: wrap-reverse容器无法滚动的问题，这里提供两个可行的解决方案：

方案1：改用flex-direction: column-reverse替代wrap-reverse #

由于你的子元素设置了width: 100%，flex-wrap: wrap-reverse的实际效果等同于纵向反向排列，直接改用flex-direction: column-reverse可以避免WebKit的兼容性bug：

修改容器CSS：

.container {
    display: flex;
    flex-direction: column-reverse; /* 替换wrap-reverse */
    overflow-y: scroll;
    height: 100vh;
    -webkit-overflow-scrolling: touch; /* 保持该属性优化滚动体验 */
}

调整子元素的margin（反向排列后，原margin-bottom会变为顶部间距，改为margin-top保持布局一致）：

.item {
    padding: 100px;
    margin-top: 10px; /* 替换margin-bottom */
    width: 100%;
    height: 200px;
}

方案2：分离滚动容器与Flex容器 #

将flex布局放到内层div中，外层仅负责滚动，避免滚动容器本身是flex容器触发WebKit的bug：

修改CSS：

.container {
    overflow-y: scroll;
    height: 100vh;
    -webkit-overflow-scrolling: touch;
}
.inner-flex {
    display: flex;
    flex-wrap: wrap-reverse; /* 把flex布局移到内层 */
}

修改JSX结构：

<div className="container">
    <div className="inner-flex">
        <div className="item">item 1</div>
        <div className="item">item 2</div>
        <div className="item">item 3</div>
        <div className="item">item 4</div>
        <div className="item">item 5</div>
        <div className="item">item 6</div>
        <div className="item">item 7</div>
        <div className="item">item 8</div>
        <div className="item">item 9</div>
        <div className="item">item 10</div>
    </div>
</div>

问题原因 #

iOS的WebKit引擎在处理同时设置flex-wrap: wrap-reverse和overflow-y: scroll的容器时，存在滚动区域计算的兼容性问题，无法正确识别容器内的溢出内容，导致滚动功能失效。通过上述两种方式绕过flex容器与滚动容器的冲突，即可解决该问题。

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