Flexbox container is not including margin-bottom

Question

doI have just started learning flexbox layout and implemented one example of it but got stuck when I set margin 20px to my flexbox container. The top, left, and right margin is working as expected but I don't know the bottom margin is not set unexpectedly.

I have set the container's height to 100% which takes the height of the parent(body element) which is also 100%.

Though It works fine when I set padding to 20px to my body and removed the 20px margin from the container.

Just wanted to know about this behavior.

Why the margin doesn't work here instead of padding?

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  background: #011627;
  height: 100%;
}

.container {
  margin: 20px;
  border: solid 2px #f9f871;
}

.container > div:nth-child(odd) {
  padding: 10px;
  background: #ff6a67;
}

.container > div:nth-child(even) {
  padding: 10px;
  background: #007277;
  color: azure;
}

/* overwrite css */
.container {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}

 <div class="container">
    <div class="home">Home</div>
    <div class="search">Search</div>
    <div class="view">View</div>
    <div class="logout">Logout</div>
  </div>

Answer 1

The box-sizing property does not include the margin for calculation:

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

The box-sizing CSS property sets how the total width and height of an element is calculated.

You may turn the margin into a padding of the parent

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  background: #011627;
  height: 100%;
}

body {
  padding: 20px;
}

.container {
  /* margin: 20px; */
  border: solid 2px #f9f871;
}

.container>div:nth-child(odd) {
  padding: 10px;
  background: #ff6a67;
}

.container>div:nth-child(even) {
  padding: 10px;
  background: #007277;
  color: azure;
}


/* overwrite css */

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

<div class="container">
  <div class="home">Home</div>
  <div class="search">Search</div>
  <div class="view">View</div>
  <div class="logout">Logout</div>
</div>

or remove it from the height of the parent with calc()

https://developer.mozilla.org/en-US/docs/Web/CSS/calc()

The calc() CSS function lets you perform calculations when specifying CSS property values. It can be used anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed.

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  background: #011627;
  height: 100%;
}

body {
  height:calc( 100% - 40px );
}

.container {
  margin: 20px;
  border: solid 2px #f9f871;
}

.container>div:nth-child(odd) {
  padding: 10px;
  background: #ff6a67;
}

.container>div:nth-child(even) {
  padding: 10px;
  background: #007277;
  color: azure;
}


/* overwrite css */

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

<div class="container">
  <div class="home">Home</div>
  <div class="search">Search</div>
  <div class="view">View</div>
  <div class="logout">Logout</div>
</div>

Because of height:100% set on both body and html, you won't see that empty space below. You can give an height to body only to allow html to scroll.

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  background: #011627;
}

body {
  height:100vh;
}

.container {
  margin: 20px;
  border: solid 2px #f9f871;
}

.container>div:nth-child(odd) {
  padding: 10px;
  background: #ff6a67;
}

.container>div:nth-child(even) {
  padding: 10px;
  background: #007277;
  color: azure;
}


/* overwrite css */

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

<div class="container">
  <div class="home">Home</div>
  <div class="search">Search</div>
  <div class="view">View</div>
  <div class="logout">Logout</div>
</div>