Height: 100%; not working with Flex Box

Question

Problem :

• To make a vertical line which separates two objects but it won't appear because it doesn't have height although I added height: 100%.
• Why isn't it filling up the space from the top to the bottom of my div? Is it because .card-body has height: auto?

Tried Cases :

• I already tried adding width, disabling flex-box but nothing of that worked, but if I add a specific height to my .card-body it works.
  

Do you know a solution how it could work without adding a specific height?

.card {
  margin-bottom: 30px;
}

.card > .card-header {
  font-weight: 500;
  text-transform: uppercase;
  font-size: 15px;
  margin-bottom: 6px;
}

.card > .card-header.light {
  color: #fff;
}

.card > .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 > .card-body.server-status {
  display: flex;
  align-items: center;
}

.card > .card-body.server-status > .counter {
  width: 50%;
  font-weight: 500;
  color: #95a0b7;
  font-size: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card > .card-body.server-status > .counter > span {
  font-size: 15px!important;
  color: #0d2c4a!important;
  text-transform: capitalize;
}

        <div class="card">
          <div class="card-header light">
            Active Services
          </div>
          <div class="card-body server-status">
            <div class="counter">
              7/9
              <span>
                Servers running
              </span>
            </div>
            <div style="border-left:1px solid #0d2c4a;height:100%;"></div>
            <div class="chart">

            </div>
          </div>
        </div>

Answer 1

You need to make it stretch since your flex container is align-items: center

You can remove the height 100%, I added a class to the divider, it comes down to this

.divider {
  align-self: stretch;
}

If you did not have the align center, it would of worked by default because the align items defaults to stretch but since you changed it to center and your divider has no content so the line does not show. Setting the divider itself to stretch again solves the problem and no need for the extra css

.card {
  margin-bottom: 30px;
}

.card>.card-header {
  font-weight: 500;
  text-transform: uppercase;
  font-size: 15px;
  margin-bottom: 6px;
}

.card>.card-header.light {
  color: #fff;
}

.card>.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>.card-body.server-status {
  display: flex;
  align-items: center;
}

.card>.card-body.server-status>.counter {
  width: 50%;
  font-weight: 500;
  color: #95a0b7;
  font-size: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card>.card-body.server-status>.counter>span {
  font-size: 15px!important;
  color: #0d2c4a!important;
  text-transform: capitalize;
}

.divider {
  align-self: stretch;
}

<div class="card">
  <div class="card-header light">
    Active Services
  </div>
  <div class="card-body server-status">
    <div class="counter">
      7/9
      <span>
         Servers running
      </span>
    </div>
    <div class="divider" style="border-left:1px solid #0d2c4a;"></div>
    <div class="chart"></div>
  </div>
</div>