React - 在 iOS Safari 中的溢出 div 上堆叠弹性项目答案

【问题标题】：React - Stacking flex items on an overflow div in iOS SafariReact - 在 iOS Safari 中的溢出 div 上堆叠弹性项目
【发布时间】：2021-02-28 01:25:41
【问题描述】：

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

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

谢谢，

最大

【问题讨论】：

标签： css reactjs flexbox overflow

【解决方案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>

【讨论】：