title: Height: 100%; not working with Flex Box
body: <p><strong>Problem :</strong></p>
  
  <ul>
  <li>To make a vertical line which separates two objects but it won't appear because it doesn't have height although I added <code>height: 100%</code>. </li>
  <li>Why isn't it filling up the space from the top to the bottom of my
  div? Is it because <code>.card-body</code> has <code>height: auto</code>?</li>
  </ul>
  
  <p><br>
  <strong>Tried Cases :</strong></p>
  
  <ul>
  <li>I already tried adding width, disabling flex-box but nothing of that worked, but if I add a specific height to my <code>.card-body</code> it works. <br></li>
  </ul>
  
  <p><br>Do you
  know a solution how it could work without adding a specific height?</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>.card {
    margin-bottom: 30px;
  }
  
  .card &gt; .card-header {
    font-weight: 500;
    text-transform: uppercase;
    font-size: 15px;
    margin-bottom: 6px;
  }
  
  .card &gt; .card-header.light {
    color: #fff;
  }
  
  .card &gt; .card-body {
    background-color: #fff;
    border-radius: 12px;
    padding: 24px;
    -webkit-box-shadow: -2px 4px 34px 1px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: -2px 4px 34px 1px rgba(0, 0, 0, 0.15);
    box-shadow: -2px 4px 34px 1px rgba(0, 0, 0, 0.15);
  }
  
  .card &gt; .card-body.server-status {
    display: flex;
    align-items: center;
  }
  
  .card &gt; .card-body.server-status &gt; .counter {
    width: 50%;
    font-weight: 500;
    color: #95a0b7;
    font-size: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .card &gt; .card-body.server-status &gt; .counter &gt; span {
    font-size: 15px!important;
    color: #0d2c4a!important;
    text-transform: capitalize;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>        &lt;div class="card"&gt;
            &lt;div class="card-header light"&gt;
              Active Services
            &lt;/div&gt;
            &lt;div class="card-body server-status"&gt;
              &lt;div class="counter"&gt;
                7/9
                &lt;span&gt;
                  Servers running
                &lt;/span&gt;
              &lt;/div&gt;
              &lt;div style="border-left:1px solid #0d2c4a;height:100%;"&gt;&lt;/div&gt;
              &lt;div class="chart"&gt;
  
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>