Border on block element with height set by child margin-top

I'm using the trick here http://stackoverflow.com/a/6615994 to maintain a 1:1 ratio between the width of icon-container and the height (which should be equal to the width, which is set as a percentage of its container). The question I'm asking myself is why is the first div showing up while the second isn't ? What does the border attribute change to the layout in this case ?

HTML

<div id="container">
	<div id="icon-container-border">
		<div class="icon-spacer"></div>
		<div class="icon"></div>
	</div>
  
  <div id="icon-container-no-border">
    <div class="icon-spacer"></div>
		<div class="icon"></div>
  </div>
</div>

CSS

#container {
	    display: block;
      width: 100%;
	    position: relative;
	    border: 2px dashed blue;
	}

	#icon-container-border {
		width: 25%;
		position: relative;
		display: block;
    
    /* Removing the border property causes #icon-container to have 0 height */
		border: 2px dashed red;
	}
  
  #icon-container-no-border {
    width: 35%; /* Different width than first just to show that 1:1 ratio of width and height is preserved */
    position: relative;
    display: block;
    /* If border is added here, second div will show up as well, but why ?? */
    /* border: 2px dashed red; */
  }

	.icon-spacer {
	  /* margin-top calculated based on width of parent */
		margin-top: 100%;
	}

	.icon {
		background-color: black;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}