reactjs - 样式化组件：溢出在 Safari 中不起作用

Question

我正在使用 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;

  }
 
`;

标签： reactjsoverflowstyled-components