8 replies

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');
    }
  }
}

KP-C

Kevin Powell - Community•3y ago•

8 replies

Aleksandr M.

Content is too tall compared to its parent and overflows

<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');
    }
  }
}

Content is too tall compared to its parent and overflows

Content is too tall compared to its parent and overflows

Similar Threads

Similar Threads

Similar Threads