title: Why does the element disappear when I set the width and height to 100%?
body: <p>I have a circle that flips on hovering over it. The <code>face-container</code> <code>width</code> and <code>height</code> are <code>210px</code>.</p>
  
  <p>I want the width and height to be dynamic for responsiveness, So I set both to 100%, But then the element disappears.</p>
  
  <p>I think that's because of the content.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.section {
      position: relative;
      padding: 80px 0;
  }
  .card-container {
      position: relative;
      margin: 0 auto;
  }    
  .card-container:after {
      clear: both;
  }
  .item-circled {
      background-color: transparent;
      text-align: center;
      position: relative;
      width: 100%;
      display: inline-block;
  }
  .face-container {
      position: relative;
      width: 210px;
      height: 210px;
      z-index: 1;
      -webkit-perspective: 1000px;
      perspective: 1000px;
  }
  .face-card {
      width: 100%;
      height: 100%;
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
      -webkit-border-radius: 50%;
      border-radius: 50%;
      -webkit-transition: all .5s linear;
      transition: all .5s linear;
  }
  .face-container:hover .face-card {
      -webkit-transform: rotateY(180deg);
      transform: rotateY(180deg);
      -webkit-border-radius: 50%;
      border-radius: 50%;
  }
  .face-1 {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      overflow: hidden;
      -webkit-border-radius: 50%;
      border-radius: 50%;
  } 
  .face-1.back {
      display: block;
      box-sizing: border-box;
      color: white;
      font-size: 13px;
      text-align: center;
      background-color: #aaa;
      -webkit-transform: rotateY(180deg);
      transform: rotateY(180deg);
      -webkit-border-radius: 50%;
      border-radius: 50%;
  } 
  .centered{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container-fluid"&gt;
      &lt;div class="section"&gt;
          &lt;section class="card-container"&gt;
              &lt;div class="row center-block"&gt;  
                  &lt;div class="col-xs-push-2 col-xs-8 text-center"&gt;    
                      &lt;div class="item-circled col-xs-4"&gt;
                          &lt;div class="face-container"&gt;
                              &lt;div class="face-card"&gt;
                                  &lt;div class="face-1"&gt;
                                      &lt;div class="text-center" style="background-color: #f7eebe;font-size: 300%;width: 100%;height: 100%"&gt;
                                          &lt;span class="centered"&gt;front&lt;/span&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div class="face-1 back"&gt;
                                      &lt;p class="centered"&gt;back&lt;/p&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt; &lt;!-- face-card --&gt;
                          &lt;/div&gt; &lt;!-- face-container --&gt;
                      &lt;/div&gt; &lt;!-- col-xs-4 --&gt;
                  &lt;/div&gt; &lt;!-- col-xs-8 --&gt;
              &lt;/div&gt; &lt;!-- row --&gt;
          &lt;/section&gt; &lt;!-- card-conteiner --&gt;
     &lt;/div&gt; &lt;!-- section --&gt;
  &lt;/div&gt; &lt;!-- container-fluid --&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What should I do to solve this?</p>
  
  <p>Here is a fiddle:
  <a href="http://jsfiddle.net/cmvz978x/19/" rel="nofollow noreferrer">http://jsfiddle.net/cmvz978x/19/</a></p>