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; */
  padding: 1px; /* NEW */
}

* {
  box-sizing: border-box; /* NEW */
}

#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;
}