Why does inner DIV spill out of outer DIV?

Question

I have been long away from HTML and CSS, can't find the solution to this simple problem.

I have one div inside the other. Outer Black and inner orange.

My HTML and CSS is :

#outer {
  position: fixed;
  width: 30%;
  height: 30%;
  background-color: black;
}
#inner {
  width: 100%;
  height: 100%;
  margin: 5px;
  background-color: orange;
}

<div id="outer">
  <div id="inner">
  </div>
</div>

Why is my inner DIV spilling out of the outer ? How do I fix it without giving fixed dimensions?

Answer 1

Because of the margin - the width is 100% PLUS the margin. To avoid that, write width: calc(100% - 10px); (= twice the margin.) Same for height.

#outer {
  position: fixed;
  width: 30%;
  height: 30%;
  background-color: black;
}
#inner {

  width: calc(100% - 10px);
  height: calc(100% - 10px);
  margin: 5px;
  background-color: orange;
}

<div id="outer">
  <div id="inner">
  </div>
</div>

Answer 2

The answers above assume that you do not want the margin. If you, in fact, want the margins, then you can add overflow: hidden; to the #outer.