CSS Odd Behavior: min-height and margin collapse

Consider the following code:

.container {
  min-height: 100px;
  background-color: lightgreen;
}

p {
  margin-bottom: 50px;
}

<div class="container">
    <p>Welcome</p>
</div>
<div class="after">
  Main content.
</div>

http://jsfiddle.net/Lp4tp/31/

Question:

MDN's margin collapse page states that if there is min-height set on a parent element, this will prevent its bottom margin from adjoining with its last child's bottom margin - which will prevent margin collapsing. To me, this makes sense.

Parent and first/last child:
If there is no border, padding, inline part, block_formatting_context created or clearance to separate the margin-top of a block from the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block from the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.

In this example, however, DevTools shows the bottom margin of the p tag where it would be expected - directly beneath the p element - but then there is 50px of blank space below the container, which doesn't make sense. The margin of the p tag seems to still be collapsing somehow, ending up outside the parent and affecting the position of the next element, even though the margin of the p and .container are not adjoining, and DevTools shows the p tag's margin nowhere near the bottom of .container.

Anyone have any explanations for why the margin is still sort of collapsing and leaving the blank space below .container? Also, is the MDN page wrong in saying that min-height will prevent margin collapse?

Thanks