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
hasheight: 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>