Kevin Powell - Community•15mo ago

Content is too tall compared to its parent and overflows

Hi everyone! I have no idea how to solve this. If I make the viewport bigger, <main> tag which is the main container here becomes bigger too, and overflow stops as after a certain point <main> grows bigger then it's content (like it should) and content starts to grow accordingly (second picture is what happens when height is bigger). It only happens after the screen becomes wider then 800px, which is my breakpoint for media query. Here's my layout and my SCSS file:

<body>
    <div id="root">
        <main>
            <div class="bg"></div>
            <div class="container"></div>
         </main>
    </div>
</body>

<body>
    <div id="root">
        <main>
            <div class="bg"></div>
            <div class="container"></div>
         </main>
    </div>
</body>

html, body, #root {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: $font-family;
  background-color: $magnolia;
}

main {
  height: 100%;
}

@media screen and (min-width: 800px) {
  #root {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  main {
    display: grid;
    grid-template-columns: 1fr 3fr;
    padding: 2rem;
    background-color: $white;
    width: 60%;
    height: 70%;
    border-radius: 23px;
  }
}

.container {
  box-sizing: border-box;
  padding-top: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  gap: 2.5rem;
}

.bg {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  .background-pic {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
    background-image: url('/src/assets/bg-sidebar-mobile.svg');
    background-size: cover;
    width: 100%;
    height: 25%;
  }
}
@media screen and (min-width: 800px) {
  .bg {
    position: static;
    z-index: 1;
    .background-pic {
      height: 100%;
      background-image: url('/src/assets/bg-sidebar-desktop.svg');
    }
  }
}

html, body, #root {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: $font-family;
  background-color: $magnolia;
}

main {
  height: 100%;
}

@media screen and (min-width: 800px) {
  #root {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  main {
    display: grid;
    grid-template-columns: 1fr 3fr;
    padding: 2rem;
    background-color: $white;
    width: 60%;
    height: 70%;
    border-radius: 23px;
  }
}

.container {
  box-sizing: border-box;
  padding-top: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  gap: 2.5rem;
}

.bg {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  .background-pic {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
    background-image: url('/src/assets/bg-sidebar-mobile.svg');
    background-size: cover;
    width: 100%;
    height: 25%;
  }
}
@media screen and (min-width: 800px) {
  .bg {
    position: static;
    z-index: 1;
    .background-pic {
      height: 100%;
      background-image: url('/src/assets/bg-sidebar-desktop.svg');
    }
  }
}

5 Replies

Kevin Powell•15mo ago

Could you get this into a codepen with a placeholder background image maybe? It's hard to know for sure, and might be pretty easy to figure out by using our dev tools I think you might be a bit too reliant on height: 100% though. It's a pain to work with, and generally, can be avoided these days, specially since you're already using flex and grid. There is more going on here too, that you didn't include, which makes it hard, because I don't know if it's the container itself causing the issue, but by the looks of it, it's the content inside of that which is overflowing

Aleksandr M.OP•15mo ago

Hi Kevin! Thanks for replying. I tried getting rid of height on .bg and .container all together, but it didn't do anything, sadly. I believe removing margins and paddings in desktop version kinda solves the issue, but I have other parts of the form which has more content and it would still overflow. I think it should shrink according to main's size then? But I don't know it that's a good practice. Here's my Codepen with entire HTML and CSS: https://codepen.io/dunder__alexander/pen/vYvrjeQ I wasn't sure if I could use SCSS there, so I just built my project with npm and threw the styles in there. The problem there behaves exactly like it does in dev mode and I think CSS is concise enough to understand what's going on. The project looks unfinished because I'm still not done with it 😅 I've only built styles for mobile so far and I'm struggling with desktop version

Aleksandr Makarev

CodePen

vYvrjeQ

...

Kevin Powell•15mo ago

In the future, in CodePen, in the CSS pane there is a the cog wheel thingy, if you click that, you can turn on SCSS 🙂 As for the problem here, it's all around the height having to match the viewport, and there not being enough room, so things are overflowing. I didn't see the issue at first, until I made my viewport less tall. If you remove:

html, body, #root {
  width: 100%;
  height: 100%;
}

/* and in the media query */
main {
  width: 60%;
  height: 70%;
}

html, body, #root {
  width: 100%;
  height: 100%;
}

/* and in the media query */
main {
  width: 60%;
  height: 70%;
}

You can replace it with this (inside the media query):

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

I think it more or less does the trick. In general, with CSS, it's hard to make a container a certain size and get the content inside to fit in perfectly. It's much easier to set a max-width or something, and let things adjust as they need to.

Aleksandr M.OP•15mo ago

Thanks, Kevin! It did the trick! I just realized that this is probably what I need to do - maybe container should always remain the same size..? You see, content within main can change, and in design sheets that I have it container is always the same size, no matter what's inside. With your help, nothing overflows now, but I'm currently facing a different issue with content inside main changing as I go through form steps and the container is constantly changing size due do difference in content.

Aleksandr M.OP•15mo ago

This is one of examples. The first main is 524.25px tall, the second one is 542.65px

Gaming

Programming

Content is too tall compared to its parent and overflows