Inner div 100% width of parent div exceeds bounds

Question

My inner #div_mainPanel is 100% width, but if you look at the right-bottom corner it's over the parent div. I have tried removing width: 100 from the inner div and the width problem is solved, but not height.

Why does it display outside of the parent div if I have set width to 100% and margin/padding is set to 0px?

Thanks in advance

#div_mainContainer {
  width: 500px;
  height: 300px;
  background-color: #f8f8f8;
  border: 1px solid red;
  margin: 0px;
  padding: 0px;
}

#div_mainPanel {
  width: 100%;
  height: 100%;
  margin: 0px;
  border: 1px solid yellow;
}

<div id="div_mainContainer">
  <div id="div_mainPanel"></div>
</div>

Answer 1

This is correct behaviour. The inner div is set to 100% width of the parent, but this does not include the border on it, so it is 100% + 2px.

To prevent the inner div being displayed outside the bounds of the parent, add box-sizing: border-box to both the parent and the child:

#div_mainContainer {
  width: 500px;
  height: 300px;
  background-color: #f8f8f8;
  border: 1px solid red;
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

#div_mainPanel {
  width: 100%;
  height: 100%;
  margin: 0px;
  border: 1px solid yellow;
  box-sizing: border-box;
}

<div id="div_mainContainer">
  <div id="div_mainPanel"></div>
</div>

Answer 2

Borders count for sizing calculations. Your inner div picks up 100% of the height/width of the parent, so it becomes 500x300, but then adds 2px all around for the border, so it's really 502x302 and leaks over the parent's border on the right/bottom edges.