CODEWITHSUNDEEP
htmlcssreactjs
Zernst
Zernst

Reputation: 325

Elements Being Pushed Above Page even with Overflow set to scroll

I am having a problem in one of my projects. I set the container to be 100vh and 100vw and overflow to be "auto." However, even with these height and width properties, and the overflow, it seems that elements are being pushed out of the div still, and I am not sure why. For example, in this div I have an h1, and an image. I have the h1 displaying above the image; when I have a screen height that is too small, I want the user to be able to scroll. However, even with the overflow set, the h1 gets pushed above the page completely, so it cannot be seen, and cannot be scrolled up to, only the image and everything below it can be scrolled.

My JSX:

<div id="SingleProjectContainer">
        <h1>{name}</h1>
            {images.map((image, idx) => (
              <div key={idx}>
                <img src={image} alt="Project Picture" />
              </div>
            ))}
      </div>

and my CSS:

#SingleProjectContainer {
  top: 0;
  padding: 10px;
  margin: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  flex-direction: column;
  overflow: auto;
  flex: auto;
}

#SingleProjectContainer h1 {
  font-size: 3em;
  margin: 10px;
  color: white;
}

I have tried many combinations of position and margin settings and nothing seems to work. I am not sure if there is another css property I am missing. Any help will be appreciated!

Upvotes: 0

Views: 3056

Answers (1)

bowlowl
bowlowl

Reputation: 467

Comment to answer:

It is a flexbox issue. Remove justify-content and align items and use margin: auto on the children instead.

Upvotes: 8

Related Questions