How to Make a Div Cover the Whole Page with CSS

Brief Background

I am currently taking the Intro to webdev course on FrontendMasters. My task is to rebuild the iOS calculator in HTML, CSS and JS as described in the open-sourced notes for the course.

I came up with a UI sketch that had my calculator centred on the page like so: calculator UI sketch

But when I tried it out, I got this: buggy calculator container

My code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./styles.css" />
    <title>JS Calculator</title>
  </head>
  <body>
    <div class="container">
      <div class="calculator"></div>
    </div>
  </body>
</html>

* {
  box-sizing: border-box;
}

body {
  background-color: #7fffd4;
  border: solid black;
}

.container {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%;
}

.calculator {
  border: solid red;
  height: 600px;
  width: 400px;
}

This was not what I expected. The container div did not occupy 100% of the page even after assigning it width: 100%; height: 100%. I found this behaviour weird. I then searched dear ol' Google to find out why...

The solution

It turns out there are a few things you need to know to make this work as expected. Lenmor did a great job of taking me through it below:

CSS gotcha: How to fill page with a div?