高度：100%；不适用于 Flex Box

Question

问题：

• 制作一条分隔两个对象的垂直线，但它不会出现，因为它没有高度，尽管我添加了height: 100%。
• 为什么它没有填满我的顶部到底部的空间 分区？是因为.card-body有height: auto吗？

案例：

• 我已经尝试过添加宽度，禁用 flex-box，但没有任何效果，但如果我在 .card-body 中添加特定高度，它就可以工作。
  

你呢 知道一个解决方案如何在不增加特定高度的情况下工作？

.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

你需要让它伸展，因为你的弹性容器是align-items: center

可以去掉100%的高度，我给分隔线加了一个类，归根结底就是这样

.divider {
  align-self: stretch;
}

如果您没有对齐中心，默认情况下它会起作用，因为对齐项目默认为拉伸，但由于您将其更改为居中并且您的分隔线没有内容，因此该行不会显示。将分隔线本身设置为再次拉伸即可解决问题，并且不需要额外的 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>

Answer 2

您也可以将此 css 属性添加到您的 css ...

.counter{
    border-right: 1px solid black;
}

Answer 3

不要使用<div>，而是尝试使用<hr> 并使用css 旋转它。大致如下：

hr { 
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 1px;
    transform: rotate(90deg);
} 

请参阅此文档以获取帮助：https://www.w3schools.com/tags/tag_hr.asp