Flexbox items is overlapping the wrapper. How can I change this?

Hello I am making a cards type of component in React, I have a problem with styling this particular part as the flexbox items is overlapping the wrapper.

The 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>
  )

The 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;
}

It shows it like this when viewed on this dimension and other dimensions, I am not sure why the items are overlapping and now its showing the white thing

Image here

Usual browser view:
Image here

>Solution :

Just remove height: 100vh; from your .opWrapper selector:

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

The reason is that your are setting height to be the height of the view port.

You can find a working example here: https://codesandbox.io/s/thirsty-wind-1ci7ei?file=/src/styles.css

Leave a Reply