时间戳

首页 > 解决方案 > 使用显示网格和填充时，带有样式组件的 React JS 应用程序不滚动

javascript - 使用显示网格和填充时，带有样式组件的 React JS 应用程序不滚动

问题描述

所以，我有这个 TSX 文件和这个风格的 div 容器链接到它。这个想法是我有一张卡片，根据内容高度应该滚动或保持居中。到目前为止，它保持居中，但是当内容溢出时它不会滚动。有谁知道可以做什么？

import React from 'react';

import { Container } from './styles';

export const Notification: React.FC = () => {
  return (
    <Container>
      <div className="card">
        <div className="box" />
      </div>
    </Container>
  );
};

import styled from 'styled-components';

export const Container = styled.div`
  padding: 32px 48px;
  min-height: 90vh;
  width: 100%;
  box-sizing: border-box;
  display: grid;

  .card {
    background: white;
    padding: 20px 24px;

    .box {
      height: 1500px;
      background: red;
    }
  }
`;

标签： javascripthtmlcssreactjsstyled-components

解决方案

尝试操作相关元素的溢出属性以滚动

推荐阅读