CODEWITHSUNDEEP
htmlcss
mrdzzz
mrdzzz

Reputation: 67

Getting horizontal overflow with scroll when width: 100vw is set on my container

So I created a basic grid for my site design and I used and make sure to add the viewport meta:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

The issue is that when I run the site in my browser it appears to have sliders on the bottom and right side like the content is bigger than the view area of my screen and the borders of the divs in the grid are out of the view. How to fix that? Here is my code:

body{
    margin: 10px;
}
.container{
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(3,fr);
    grid-template-rows: 50px 1fr 1fr 100px;
    gap: 10px;
    box-sizing: border-box;
}
.container div{
    padding: 10px;
    border: 1px solid #000000;
}
.header{
    grid-column-start: 1;
    grid-column-end: 4;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <head>
      <link rel="stylesheet" href="style.css" />
      <title>the title idk</title>
    </head>
  </head>
  <body>
    <div class="container">
      <div class="header">Header</div>
      <div class="content-big"></div>
      <div class="content-small"></div>
      <div class="footer"></div>
    </div>
  </body>
</html>

Upvotes: 1

Views: 994

Answers (1)

Youssouf Oumar
Youssouf Oumar

Reputation: 45893

The problem is that you set width: 100vw; on .container and also have margin: 10px; on body. So your website's width is actually 100vw + 20px so it overflows. A solution is to simply remove that width: 100vw from .container, as it takes all the available width by default.

body{
    margin: 10px;
}
.container{
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(3,fr);
    grid-template-rows: 50px 1fr 1fr 100px;
    gap: 10px;
    box-sizing: border-box;
}
.container div{
    padding: 10px;
    border: 1px solid #000000;
}
.header{
    grid-column-start: 1;
    grid-column-end: 4;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <head>
      <link rel="stylesheet" href="style.css" />
      <title>the title idk</title>
    </head>
  </head>
  <body>
    <div class="container">
      <div class="header">Header</div>
      <div class="content-big"></div>
      <div class="content-small"></div>
      <div class="footer"></div>
    </div>
  </body>
</html>

Upvotes: 3

Related Questions