Как сделать элементы внутри div одинаковыми по высоте и ширине, даже если содержимое отличается?

Question

Я пытаюсь создать «карты» для своей команды. Тем не менее, выглядят странно, потому что размеры разные. Моя установка выглядит следующим образом:

<div class="card-wrapper">
<div class="card">Card1</div>
<div class="card">Card2</div>
</div>

Мой css выглядит сейчас так:

.card-wrapper
{
display: flex;
align-items: center;
align-content: center;
flex-direction: row;
}
.card
{
width: 30rem;
background: #000;
align-items: center;
justify-content: center;
}

Я не могу найти способ сделать высоту одинаковой для все карты. Я видел здесь на стеке потока, что я должен:

.card-wrapper {
display:flex;
}
.card {
flex:1;
}

Но это не похоже на работу. Какие-либо предложения? Вот изображение того, как оно выглядит в настоящее время: CARDS NOW

Answer 1

Установка flex-основы была бы полезной. Более того, для этого вам не нужны align-items и align-content.

* { box-sizing: border-box; }

.container { 
  display: flex; 
  flex-flow: row wrap;
  justify-content: space-between;
  height:20vh
}


.card {
  box-shadow: 0 0 4px rgba(0,0,0,0.4);
  flex: 0 1 33.33%;
  padding: 15px; /* gutter width */
}

<div class="container">
  <div class="card"><br></div>
  <div class="card"><br></div>
  <div class="card"><br><br><br><br><br></div>
</div>

Answer 2

Я думаю, это потому, что вы используете

align-items: center

, просто удалите его, чтобы иметь одинаковую высоту для этих двух карт

https://stackblitz.com/edit/typescript-sevm5b