Flex causing button to go outside of div [duplicate] - html

Question

This question already has answers here:
Child with max-height: 100% overflows parent
(11 answers)
Closed 3 years ago.
I'm trying to create equal card-like columns, using flex to fix the buttons to the bottom of the content is not aligned. Unfortunately, the button is being pushed out of the column. I know it's because the height of the card-body is set to 100%, but I'm not sure why it's setting the height to expand past its parent.
Any help would be appreciated!
Codepen:
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">
<img src="http:lorempixel.com/400/300/cats" alt="">
<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>
Lorem, ipsum.
</div>
</div>
<div class="col-12 col-sm-6 col-md-3 ja-card">
<img src="http:lorempixel.com/400/300/cats" alt="">
<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>
Quidem, perferendis!
</div>
</div>
<div class="col-12 col-sm-6 col-md-3 ja-card">
<img src="http:lorempixel.com/400/300/cats" alt="">
<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>
Nobis, eum.
</div>
</div>
<div class="col-12 col-sm-6 col-md-3 ja-card">
<img src="http:lorempixel.com/400/300/cats" alt="">
<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>
Odit, consectetur?
</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

The better way to approach this is to use flexbox for the card. And then make space between its children.
So
add display: flex and flex-direction: column to .ja-card
Set justify-content: space-between for .ja-card-body
Also, you don't need to set 100% height for .ja-card-body. it is useless.
Working Demo

Answer 2

Add box-sizing:border-box to your .ja-card-body CSS definition.