Why Is There Vertical Scroll on the Main Container

Why is there vertical scroll on the main container?

the body tag by default has a margin depend on the browser as example in chrome its margin:8pxyou have to rest it via

body{
  margin:0;
}

see updated fiddle

Why is there a vertical scroll bar if parent and child have the same height?

Short Answer

You've run into one of the sneakiest default settings in CSS: vertical-align: baseline

Switch the value to top, bottom or middle, and you should be all set.

---

Explanation

The initial value of the vertical-align property, which applies to inline-level and table-cell elements, is baseline. This allows browsers to provide space below elements for so-called descenders.

In typography, lowercase letters such as j, g, p and y are known as descenders because they breach the baseline.

baseline

The baseline is the line upon which most letters sit and below which descenders extend.

^{Source: Wikipedia.org}

Being that all inline-level elements are, by default, vertical-align: baseline, elements such as button, input, textarea, img and, like in your code, inline-block divs, will be elevated slightly from the bottom edge of their container.

^{Source: Wikipedia.org}

This descender space adds height inside the container, which causes an overflow and triggers the vertical scroll.

You can see the descender space by scrolling to the bottom of your demo. You'll notice the small gap between the child elements and the bottom edge.

Here are several ways to handle this:

1. Override vertical-align: baseline with vertical-align: bottom (or another value).

2. Switch from display: inline-block to display: block.

3. Set a line-height: 0 on the parent.

4. Set a font-size: 0 on the parent. (If necessary, you can restore the font-size on the children.)

How to Know Which HTML Element is Causing Vertical Scroll Bar

Ok, I got that if I change from margin-top to padding-top for container to adjust for nav then problem is solved.
I reached to the solution after deleting elements in Firebug. So, quick fix problem is solved but my questions are still open.

How to know which element is causing scroll bar? Any trick?

Also, why margin-top is not working but padding-top has worked?

To make clear where I made change, I am adding the modified CSS:

   /* Adjust Nav */
    #wrap > .container {
        padding-top: 60px;

    }

Why do I have scroll bars on my website when there shouldn't be?

It's this combination

position: relative;
left: 24.5%;
display: flex;

You've got a block level box, that's margin area is therefore as wide as its container, then it's shifted 24.5% of the width of its container to the right, making its right edge 124.5% from the container's left edge. That's always going to overflow the container horizontally.

I suggest using margin-left instead of left.

Horizontal scroll bar causes vertical scroll bar to come when using css Grid

It is a little awkward that you gridify everything. Never seen this before.

The reason is: the horizontal takes up a little vertical space. That is then subtracted from the available vertical space. But unfortunately the grid rows don't adopt to that.

I don't have an authoritative answer whether this is the intended behavior or if it is just not defined by W3C and browser vendors do their own stuff.

But here is a workaround (which applies to your case, but might not be applicable for everyone): I wrapped the boxes of container and broke apart responsibilities. Also I used position: relative and absolute.

html {

  height: calc(100% - 20px);

}

body {

  height: 100%;

  display: grid;

  grid-template-rows: 1fr 1fr;

}

.mainContainer {

  height: 100%;

  display: grid;

  grid-template-rows: auto 1fr;

}

.container {

  display: grid;

  grid-template-rows: 1fr;

  grid-auto-flow: column;

  width: 500px;

  overflow-x: auto;

  overflow-y: auto;

}

.container-wrap {

  display: grid;

  width: 500px;

  overflow-x: auto;

  overflow-y: auto;

  position: relative;

}

.wrap {

  display: grid;

  grid-template-rows: 1fr;

  grid-auto-flow: column;

  position: absolute;

}

.box {

  width: 120px;

}

<div class="mainContainer">

  <h3>Without horizontal scroll - no vertical scroll bar</h3>

  <div class="container">

    <div class="box">1</div>

    <div class="box">2</div>

    <div class="box">3</div>

  </div>

</div>

<div class="mainContainer">

  <h3>With horizontal scroll- vertical scroll is comming</h3>

  <div class="container-wrap">

    <div class="wrap">

      <div class="box">1</div>

      <div class="box">2</div>

      <div class="box">3</div>

      <div class="box">4</div>

      <div class="box">5</div>

    </div>

  </div>

</div>

Body height 100% displaying vertical scrollbar

If you paint the backgrounds of html and body (giving each its own color), you'll quickly notice that body is being shifted down along with #container, and #container itself isn't offset from the top of body at all. This is a side effect of margin collapse, which I cover in detail here (although that answer describes a slightly different setup).

It's this behavior that's causing the scrollbar to appear, since you've declared body to have 100% the height of html. Note that the actual height of body is unaffected, as margins are never included in height calculations.

---

Related Topics