1

I have multiple cards, and I'd like to obtain the same height for all the cards based on the maximum height obtained by filling the content in the div with the head class. The Cards container is a flex-container, and also the card is structured as a flex-container

I also attached an example image for a better comprehension. Is it possible to achieve with css?

<div class="Cards">
    <div class="row justify-content-center">
        <div class="product col-12 col-lg-4 mb-4 mb-lg-0">
            <div class="card-body-wrapper d-flex flex-column">
                <div class="card-body d-flex flex-column">
                    <div class="head">
                        <h4>Card Title</h4>
                        <p class="subtitle">Card Subtitle</p>
                    </div>
                    <p>element 1</p>
                    <p>element 2</p>
                    <p>element 3</p>
                    <a class=" btn"></a>
                </div>
            </div>
        </div>
    </div>
</div>

enter image description here

ndreuccio
  • 69
  • 9
  • Not the way the image has set it up, you will need js. Due to each head class is in their own container which means they are not flex items of the same parent – Huangism Mar 01 '18 at 14:59
  • 2
    No.. there is no CSS method (not one) for equalising heights between elements that do not share a parent element. You need JS. – Paulie_D Mar 01 '18 at 15:03
  • The card container is flex – ndreuccio Mar 01 '18 at 15:17

0 Answers0