1

I'm trying to make portfolio cards and since content inside can be a bit longer or shorter I want it to have same height. Currently I'm using min-height and the third card is obviously bigger.

.wrapper {
    height: 100%;
    max-width: 1024px;
    margin: 0 auto;
    font-size: 1.6rem;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.container > * {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    padding: 10px;
    min-height: 200px;
    margin: 5px;
}

.one {
    background-color: green;
}
.two {
    background-color: red;
}
.three {
    background-color: yellow;
}
<div class="wrapper">
    <div class="container">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, facere. Consequatur eos eligendi beatae quasi soluta obcaecati eum facilis odit error itaque. Dolorem eveniet dolores totam iste quos sequi non voluptatibus adipisci aspernatur a delectus, voluptas laboriosam. Repellat illo est quasi quia modi? Ad quod adipisci quia delectus totam, explicabo impedit fugiat sint, in quidem aliquid nulla nobis similique, architecto error eius. Illum quisquam quas error atque voluptatum tempore? Reiciendis eum autem asperiores, nihil reprehenderit dolores non debitis natus accusamus, fuga rem ipsa quod rerum aspernatur doloribus ut eligendi consectetur, a odit. At dolorem qui eveniet omnis libero optio impedit?</div>
   </div>
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Hirakasu15
  • 11
  • 1

0 Answers0