0

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">
      <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;
}
Daniel
  • 91
  • 3
  • 11
  • 1
    I reread your question and based on that: https://stackoverflow.com/questions/14262938/child-with-max-height-100-overflows-parent – disinfor Jul 02 '19 at 18:19
  • 1
    That explains a lot... I just inspected it and that's 100% what's going on here. Thanks! – Daniel Jul 02 '19 at 18:26

2 Answers2

2

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

Reza Ramezanpour
  • 585
  • 8
  • 28
  • So I added the css that you recommended, and that aligned the buttons, but messed with the layout. I can take it from here, thanks! also, the working demo that you posted does not render a different result - I think you may have forgotten to press save. Either way, the code you posted before that helps a lot! – Daniel Jul 02 '19 at 18:33
  • @Daniel I just updated my answer. this should now work as expected – Reza Ramezanpour Jul 02 '19 at 18:35
0

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

meDeepakJain
  • 156
  • 1
  • 13