React - 在 iOS Safari 中的溢出 div 上堆叠 flex 项目

Question

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

      <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>

在桌面上：

在响应式控制台上 (chrome)：

在 Safari 上：

谢谢，

最大

Answer 1

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

它在我的代码中呈现类似的东西：

      <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>

React - 在 iOS Safari 中的溢出 div 上堆叠 flex 项目

React - Stacking flex items on an overflow div in iOS Safari

css

overflow

flexbox

reactjs