样式化的组件：Safari浏览器中的溢出功能无效

问题描述

我正在使用React应用。对于样式，我使用styled-components。除了表格，我还有一个聊天选项。在我的Chorme Firefox中，我的聊天框看起来像这样：Chrome Image，而在Safari中，它看起来是这样的：Sarari image。我已经检查了很多类似的问题，例如解决方案。但是在styled-components中找不到任何解决方法。我尝试了其他stackoverflow解决方案，但无法修复。

这是我的聊天组件

return (
    <div className={className}>
      <div
        className="comments-wrapper"
        ref={commentWrapperEndRef}
      >
        {comments.length === 0 &&
          <NoCommentsPlaceholder>
            {t(`noCommentsMessage`)} <br />
            {t(`startdiscussionMessage`)}
          </NoCommentsPlaceholder>
        }
        {formattedComments}
      </div>
      <IssueCommentForm
        issueUUID={issueUUID}
        ref={commentFormRef}
      />
    </div>
  );
})`
  @keyframes portal-fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-content: flex-start;
  background-color: #fff;
  position: relative;
  animation: portal-fade-in 250ms ease forwards 1500ms;
  opacity: 0;
  &-loader {
    position: absolute;
    top: 0;
    right:0;
    left:0;
    bottom: 0;
    background-color: red;
    z-index: 2;
  }
  .comments-wrapper {
   overflow: hidden; ## THIS DOES NOT WORK IN SAFARI
   overflow-y: auto; ## THIS DOES NOT WORK IN SAFARI
   padding: 20px;
  flex: 1 1 50px;
   width: 100%;
  position: relative;
  z-index: 1;

  }
 
`;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）