Flexbox 项目与包装器重叠。我该如何改变它?

问题描述 投票:0回答:2

你好,我正在 React 中制作卡片类型的组件,我在设置这个特定部分的样式时遇到问题,因为 flexbox 项目与包装器重叠。

JSX

const OtherProjects = () => {
  return (
    <div className='opWrapper'>
        <div className="containerWrapper">
            <div className="item"></div>
            <div className="item"></div>
            <div className="item"></div>
            <div className="item"></div>
            <div className="item"></div>
            <div className="item"></div>
            
        </div>
   </div>
  )

CSS

.opWrapper{
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  background-color: #232A4E;
}

.containerWrapper{
  display: flex;
  gap: 1em;
  height: 100%;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 5em;
}

.item{
  width: 20em;
  height: 20em;
  border-radius: 10px;
  border: 2px black solid;
  background-color: #CCF6F6;
}

在这个维度和其他维度上看都是这样的,我不知道为什么项目重叠,现在显示白色的东西

Image here

通常的浏览器视图: Image here

css reactjs flexbox styling
2个回答
1
投票

只需从您的

height: 100vh;
选择器中删除
.opWrapper

.opWrapper{
  width: 100%;
  margin: 0 auto;
  background-color: #232A4E;
}

原因是您将高度设置为视口的高度。

您可以在这里找到一个工作示例:https://codesandbox.io/s/thirsty-wind-1ci7ei?file=/src/styles.css


0
投票

你需要为此使用样式属性

尝试添加你的 CSS

Overflow-y: scroll

在您的父容器中添加上述属性。

© www.soinside.com 2019 - 2024. All rights reserved.