0

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!

Zernst
  • 315
  • 4
  • 17
  • Is it being pushed out of the div, or out of the window? Because right now with your position and padding, the div is placed slightly outside the window. – bowlowl Nov 30 '20 at 02:24
  • So, the way it is setup now, as the window height gets shorter, the top-most portions start to get pushed out of the div and therefore, out of the window (since the vertical height is at 100vh). The scroll DOES appear as expected, but even the top of the scroll only goes up to right below the h1, if that makes sense. – Zernst Nov 30 '20 at 04:35
  • Ah, it's a [flexbox issue](https://stackoverflow.com/questions/33454533/cant-scroll-to-top-of-flex-item-that-is-overflowing-container). Recommended is to not use `justify-content` or `align items` and put `margin: auto` on the children instead. – bowlowl Nov 30 '20 at 05:32
  • Wow, I noticed that just now too, by removing justify-content, it doesn't do that anymore. Thank you so much for the help! I appreciate it, if you put it below, I will mark it as the answer. – Zernst Nov 30 '20 at 14:28

1 Answers1

5

Comment to answer:

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

bowlowl
  • 417
  • 2
  • 7
  • Fixed right away like I got blessed by an angel. Still unclear on why justify/align behaves this way but I guess CSS is kinda always a little like black magic anyways. – Llama D'Attore Aug 17 '23 at 23:22