Гибкий контейнер имеет дополнительный нижний зазор, когда тело карты находится внутри, а контейнер .row имеет фиксирован ⇐ CSS

[Anonymous]

У меня есть 5 карточек, которые отображаются как flex в строке с классом mrow. У меня есть строка в контейнере с классом mcontent< /code>.Высота строки — 571 пиксель.

Код: Выделить всё

.mrow{height:100%}
.mcontain{height:571px}

Но когда у меня есть кнопка в третьем гибком положении, под ней появляется дополнительное пространство и расширяется вся строка. Я пытался добавить align-self: flex-start;, как указано здесь, но тщетно.
Мой фактический результат:

Высота второй строки ниже первой


Здесь я добавил свой код align-self, но он не удаляет нижнее пространство


Заранее спасибо
Отредактировано, чтобы добавить:
когда я запускаю $(".mrow").css("height", 'calc(100% - ' + (- (-$ (".div_text_center").height())) + 'px)'); высота увеличивается для каждой карточки создается дополнительное пространство ниже ( только под 1 карточкой. Я хочу, чтобы все карты одинаковой высоты). Как это преодолеть?
Отредактировано, чтобы добавить:
В развернутом режиме первая строка с 3 картами имеет высоту больше, чем вторая строка с оставшимися картами. 2 карты после добавления кнопки.
Это моя проблема. Мне нужны обе строки одинаковой высоты, даже если кнопка добавлена ​​в третью карточку моей первой строки

Код: Выделить всё

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;
}

Код: Выделить всё

[/i]
Welcome,
[i][/i]
Logout

[i][/i]
Logged out
Log In















Details




go

JSFiddle

Подробнее здесь: https://stackoverflow.com/questions/792 ... ntainer-of