Odd CSS behavior: crash of minimum height and fold

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 antialiasing page states that having a minimum height set on a parent will prevent its bottom margin from shifting off its last child bottom edge - this will prevent a crash. It makes sense to me.

Parent and first / last child:
If no border, padding, inline part, block_formatting_context, created or allowed to separate the top of the box from the top of its first child, or no border, padding, inline content, height, minimum height, or max -height to separate the bottom edge of the box from the bottom edge of its last child, then those margins collapse. The collapsed edge ends outside the parent.

In this example, however, DevTools shows the bottom margin of the p tag where expected - right below the p element, but then there is 50px of free space under the container, which doesn't make sense. The p-tag's limit still collapses, ends outside of the parent and affects the position of the next element, even if the p-field and the .container are not touching, and DevTools shows that the p-tag is nowhere near the bottom of the container.

Does anyone have an explanation as to why the margin still collapses and leaves an empty space at the bottom of the .container? Also, is the MDN page incorrect in stating that the minimum height will prevent the crash?

thank