I have 5 cards which have display as flex in a row. But when I have a button in 3rd flex, it gets extra space below it and expands the entire row. I tried adding align-self: flex-start; as stated here but in vain.
My actual result is
second row height is lower than first
This is where I added my align-self code but it doesn't remove the bottom space
Thanks in advance
Edited to add:
when I run $(".mrow").css("height", ' calc(100% - '+ (- (-$(".div_text_center").height())) +'px)'); the height increases for every card creating an extra space below ( below only 1 card. I want all cards same height). How do I overcome it?
Edited to add:
In maximised mode, the first row with 3 cards has height greater than second row with remaining 2 cards after the button is added.
That is my problem. I need both the 2 rows same height even when button is added in 3rd card of my first row
function relocate() { $(".mcontain").css("height", ' calc(100% - '+ ($(".navbar").height() - (-$("footer").height()) - (-$(".div_text_center").height())) +'px)'); $(".mrow").css("min-height", ' calc(100% - '+ (- (-$(".div_text_center").height())) +'px)'); $(".mcardlogin").css("min-height","200px"); } relocate();.mcontain{ height:571px;}.card { position: relative; display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: #fff; background-clip: border-box; border: 1px solid rgba(0, 0, 0, 0.125); border-radius: 0.25rem;}main, html, body { height: 100%; /* margin: 0; */}.mrow { display: flex; height: calc(100% + 0px);}.row{ flex-wrap: wrap;}.card-header:first-child { border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;}.card-header { padding: 0.5rem 1rem; margin-bottom: 0; background-color: rgba(0, 0, 0, 0.03); border-bottom: 1px solid rgba(0, 0, 0, 0.125);}.card1 { background-color: violet !important;}.card2 { background-color: indigo !important;}.card3 { background-color: blue !important;}.card4 { background-color: green !important;}.card5 { background-color: yellow !important;}.mcardlogin { border-radius: .25rem;}.a_login { float: right;}.colorwhite { color: white; }.a_button { -webkit-box-shadow: inset 0 0 30px #00f, 0 0 30px #00f; -moz-box-shadow: inset 0 0 30px #00f, 0 0 30px #00f; box-shadow: inset 0 0 30px #00f, 0 0 30px #00f; -webkit-border-radius: 28px; -moz-border-radius: 28px; border-radius: 28px; background: #168bff; display: block; padding-top: 20px; padding-bottom: 20px; margin: 20px; text-decoration: none; font: bold 17px Helvetica, Arial, sans-serif; color: #fff; text-align: center } .a_button:hover { -webkit-box-shadow: inset 0 0 30px #f00, 0 0 30px #f00; -moz-box-shadow: inset 0 0 30px #f00, 0 0 30px #f00; box-shadow: inset 0 0 30px #f00, 0 0 30px #f00; background: #f56565; }<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"><script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script><div class="container mcontain" style=""><main role="main" class="pb-3 m_main"><div class="mrow row"><div class="col-md-6 col-sm-12 mcardlogin card1"><div class="card "><div class="card-header"><div class="right"><div class="min250px"><div id="divtick_login" class="logininfo" style="display: none;"><i class="bi bi-check-circle green loginwrong"></i> Welcome,<i id="sessionuser"></i><a class="a_logout">Logout</a></div><div id="divwrong_login" class="logininfo"><i class="bi bi-exclamation-circle red logintick"></i> Logged out<a class="a_login">Log In</a></div></div></div></div></div></div><div class="col-md-6 col-sm-12 mcardlogin card2"><div class="card "></div></div><div class="col-md-6 col-sm-12 mcardlogin card3"><div class="card "><div class="card-header"><div class="right"><div class="min250px colorwhite"> Details</div></div></div><div class="card-body"><div class="card-text"><a class="a_button">go</a></div></div></div></div><div class="col-md-6 col-sm-12 mcardlogin card4"><div class="card "></div> </div><div class="col-md-6 col-sm-12 mcardlogin card5"><div class="card "></div></div></div></div></div>