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

将 box-sizing:border-box 添加到您的 .ja-card-body CSS 定义中。

Answer 2

解决这个问题的更好方法是对卡片使用 flexbox。然后在它的孩子之间留出空间。

所以

• 将display: flex 和flex-direction: column 添加到.ja-card
• 将justify-content: space-between 设置为.ja-card-body

另外，您不需要为.ja-card-body 设置 100% 的高度。没用。

Working Demo