CSS min-height adds to child element's bottom margin - html

Question

I've been having a very weird CSS issue. Some of my pages have displayed an unexplained "space" between element. Inspecting the code shows that this space does not belong to any element.
I've narrowed it down, and I think I know why this issue is happening. But I wanted to know, under the hood, why it's happening.
The issue, I think, is that min-height: 50px in the #outer selector adds the bottom margin of #inner below #outer, which results in an the unexplained space mentioned above. If it were to be replaced with height: 50px the space would disappear.
This happens on Chrome but not FireFox.
My theory is that Chrome's CSS lays out the elements first then checks if min-height requirement is met. If not, then it extends the height of the div, pushing the "unexplained space" along with it. It essential copied, or inherited, the bottom margin of the child element. I think this only happens to the bottom margin though.
I've tried two tests of this theory, adding padding: 1px; and adding overflow: hidden; they both cause the height of the div to include it's child and thus gets rid of the issue. Although, I think in the case of overflow: hidden it's more cutting off the overflown content.
But I'm no CSS expert, all this is just speculation on my part, which is why I wanted to pose this as a question :)
Here's the code
#outer {
background-color: blue;
min-height: 100px;
}
#inner {
background-color: red;
height: 50px;
margin-bottom: 50px;
}
#bottom {
background-color: green;
height: 50px;
}
<div id="outer">
<div id="inner">
</div>
</div>
<div id="bottom">
</div>

Answer 1

This occurs due to margin collapsing - specifically the margin-bottom of inner collapses to become the margin-bottom of the outer element.
Solution:
Give a border to the outer element to prevent the margin collapsing - see demo below:
#outer {
background-color: blue;
min-height: 100px;
border: 1px solid blue;
}
#inner {
background-color: red;
height: 50px;
margin-bottom: 50px;
}
#bottom {
background-color: green;
height: 50px;
}
<div id="outer">
<div id="inner">
</div>
</div>
<div id="bottom">
</div>