css grid height scroll bar

Question

I have this css

.App {
  font-family: sans-serif;
  text-align: center;
  display: grid;
  margin: 10px;
  border: 1px solid;
  height: calc(100vh - 20px);
}

to make a centered box (full screen) but I notice there's a scrollbar, I wonder if the px is correct why the scrollbar is there?

https://codesandbox.io/s/relaxed-butterfly-yqx5ix

Answer 1

You need to understand box-sizing for this.

But before that, add these lines to the css file to fix this.

* {
  box-sizing: border-box;
}

box-sizing: content-box So, the width and the height you apply to an element decides it's content width if the box-sizing is set to content-box i.e, borders and paddings are not included in that height or width.

For an example:

If you set an element's width to 100 pixels, then the element's content box will be 100 pixels wide, and the width of any border or padding will be added to the final rendered width, making the element wider than 100px. And because this value is default, your App exceeds the height of the browser.

box-sizing: border-box

border-box tells the browser to account for any border and padding in the values you specify for an element's width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width.

Source: mdn