Inner div 100% width of parent div exceeds bounds

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.

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>