Flex导致按钮超出div[重复]

Question

我正在尝试创建相等的卡片状列，使用flex将按钮固定到内容底部未对齐的位置。不幸的是，按钮被从列中推出。我知道这是因为卡体的高度设置为100%，但我不知道为什么它会将高度设置为超出其父级。

任何帮助都将不胜感激！

代码笔：https://codepen.io/anon/pen/wLjrzw

HTML：

<!--
.container-fluid>.row>.col-12.col-sm-6.col-md-3.ja-card*4>a>img[src="http:lorempixel.com/400/300/cats"]^.ja-counter{$}+.ja-card-body.d-flex.flex-column>h4>lorem4^p>lorem^a.mt-auto.btn.btn-lg.btn-primary>lorem2
-->
<div class="container-fluid">
  <div class="row">
    <div class="col-12 col-sm-6 col-md-3 ja-card">
      <a href=""><img src="http:lorempixel.com/400/300/cats" alt=""></a>
      <div class="ja-counter">1</div>
      <div class="ja-card-body d-flex flex-column">
        <h4>Lorem ipsum dolor sit.</h4>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, impedit qui voluptates porro vero incidunt, aliquid dignissimos quae a tempora nisi quis consequatur atque. Officiis laudantium laborum ab sequi pariatur?</p>
        <a href="" class="mt-auto btn btn-lg btn-primary">Lorem, ipsum.</a>
      </div>
    </div>
    <div class="col-12 col-sm-6 col-md-3 ja-card">
      <a href=""><img src="http:lorempixel.com/400/300/cats" alt=""></a>
      <div class="ja-counter">2</div>
      <div class="ja-card-body d-flex flex-column">
        <h4>Optio excepturi inventore reprehenderit?</h4>
        <p>Sapiente quis, commodi fugiat architecto temporibus accusantium veniam quasi nisi tempore facere sint similique magni, quae suscipit rem molestias. Officia quidem sint sapiente odit nisi sit pariatur repellat eaque consequuntur.Sapiente quis, commodi fugiat architecto temporibus accusantium veniam quasi nisi tempore facere sint similique magni, quae suscipit rem molestias. Officia quidem sint sapiente odit nisi sit pariatur repellat eaque consequuntur.</p>
        <a href="" class="mt-auto btn btn-lg btn-primary">Quidem, perferendis!</a>
      </div>
    </div>
    <div class="col-12 col-sm-6 col-md-3 ja-card">
      <a href=""><img src="http:lorempixel.com/400/300/cats" alt=""></a>
      <div class="ja-counter">3</div>
      <div class="ja-card-body d-flex flex-column">
        <h4>Aperiam porro quae deserunt?</h4>
        <p>Doloremque tenetur aut adipisci dolore sed aspernatur! Praesentium vitae ut, quisquam sed nesciunt odit! Tempora incidunt, laborum impedit ratione maiores ipsum, laboriosam odit aspernatur ex reiciendis necessitatibus similique id optio?</p>
        <a href="" class="mt-auto btn btn-lg btn-primary">Nobis, eum.</a>
      </div>
    </div>
    <div class="col-12 col-sm-6 col-md-3 ja-card">
      <a href=""><img src="http:lorempixel.com/400/300/cats" alt=""></a>
      <div class="ja-counter">4</div>
      <div class="ja-card-body d-flex flex-column">
        <h4>Aspernatur mollitia commodi ipsum!</h4>
        <p>Quia veniam recusandae ut, cum porro assumenda. Aut magnam quo rem sapiente vitae sequi, distinctio error repudiandae consequatur ut doloribus commodi rerum? Cumque iure quis pariatur, consequatur dolore consectetur doloribus?</p>
        <a href="" class="mt-auto btn btn-lg btn-primary">Odit, consectetur?</a>
      </div>
    </div>
  </div>
</div>

CSS：

.ja-card {
  background-color: #d6d6d6;
  padding: 0;
} 
img {
  width: 100%;
} 
.ja-card:nth-child(even) {
  background-color: #f6f6f6;
}
.ja-card-body {
  height:100%;
  padding: 2em;
}
.ja-counter {
  position: relative;
  top: 0;
  left: 50%;
  margin: -35px 0 0 -35px;
  display: block;
  width: 70px;
  height: 70px;
  border: 5px solid #fff;
  border-radius: 50%;
  color: #fff;
  font-family: "Helvetica", sans-serif;
  font-size: 36px;
  font-weight: bold;
  line-height: 60px;
  text-align: center;
  background-color:red;
}

Answer 1

将框大小：边框框添加到您的。ja卡体CSS定义。

Answer 2

更好的方法是将flexbox用于卡。然后在孩子之间留出空间。

所以

• 添加显示：flex和flex-方向：列到. ja-card
• 为. ja-card-body
设置 ready-contents-： space-在之间

此外，无需为<代码>设置100%高度。ja卡体。这是无用的。

工作演示