Css React-在iOS Safari中将flex项目堆叠在溢出分区上

我正在开发的应用程序使用react对话组件，在移动版本上堆叠一些卡片时遇到问题。在桌面版和inspect模式下，这些卡堆叠得非常完美，它们之间有15px的空间，但当我在iPhone上启动时，我得到的结果可以在第3张图中看到。我找不到这个bug的来源，任何帮助或类似的问题都非常欢迎

      <Box
        display="flex"
        flexDirection="column"
        style={{
          overflowY: 'auto',
          WebkitOverflowScrolling: 'touch',
        }}
        onScroll={handleScroll}
        {...conversationProps}
      >
        {messages.map((item, index) => (
          <Box
            ref={ref}
            display="flex"
            flexDirection="row"
            justifyContent={
              item.user.username === username ? 'flex-end' : 'flex-start'
            }
            marginBottom={Spaces.component}
          >
              <ApplicationMessage
                key={index}
                isFromMe={item.user.username === username ? true : false}
                profilePicture={item.user.profile_picture}
                username={item.user.username}
                timestamp={item.timestamp}
                message={item.data.message}
                timestampLanguage={timestampLanguage}
                containerProps={{ flexShrink: 0 }}
              />
          </Box>
        ))}
      </Box>

{messages.map（（项目，索引）=>(

在响应控制台（chrome）上：


关于狩猎：


谢谢,

Max
为了修复它，我刚刚删除了可滚动（溢出）div的
flex
属性

它在我的代码中呈现类似的内容：

      <Box
        overflowY="auto"
        onScroll={handleScroll}
        {...conversationProps}
      >
        {messages.map((item, index) => (
          <Box
            ref={ref}
            display="flex"
            flexDirection="row"
            justifyContent={
              item.user.username === username ? 'flex-end' : 'flex-start'
            }
            marginBottom={Spaces.component}
          >
              <ApplicationMessage
                key={index}
                isFromMe={item.user.username === username ? true : false}
                profilePicture={item.user.profile_picture}
                username={item.user.username}
                timestamp={item.timestamp}
                message={item.data.message}
                timestampLanguage={timestampLanguage}
                containerProps={{ flexShrink: 0 }}
              />
          </Box>
        ))}
      </Box>


{messages.map（（项目，索引）=>(
))}