Настройка элементов flexbox одинаковой ширины и высоты в зависимости от самого высокого потомка

Question

Да, я знаю, что есть много вопросов и ответов относительно flexbox на этом сайте, но на самом деле у меня ничего не получалось. Так что я пытаюсь сделать три карты с немного отличающимся содержанием, которые должны быть одинаковой ширины и высоты. Кроме того, я хочу, чтобы высота была установлена ​​на основе самого высокого ребенка.

Я перепробовал много вариантов, и первый был:

flex: 1 1 0;

, который дал мне этот результат (красный - граница флекс-контейнера): Никто из них не равен.

Единственное решение, которое я нашел, это установить максимальную ширину и высоту. Я работал, но я не думаю, что это лучшее решение. Поскольку я использую flexbox, я хочу, чтобы он был плавным и отзывчивым.

CSS:

.flex-container {
    border: 1px solid red;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.flex-items {
    cursor: pointer;
    margin: 20px;
    border-radius: 2px;
    padding: 0px;
    flex: 1 1 0;
    /* flex-basis: 100%; */
    /* height: 100%; */
    /* max-width: 280px; */
    /* width: max-content; */
    animation-name: fadeInDown;
    animation-duration: 0.4s;
}

HTML:

<div class="flex-container">
  <div *ngFor="let module of modules" class="{{module.name}}">
    <mat-card matRipple [matRippleColor]="white"  class="flex-items"
    *ngxPermissionsOnly="module.permissionsRequired">
      <div class="card-bg-image"></div>
        <span routerLink={{module.routing}}>
            <mat-card-title>
              <h1>
                  {{module.name}}
              </h1>
            </mat-card-title>
          <mat-icon>{{module.icon}}</mat-icon>
          <hr>
          <mat-card-content>
            <h3>
                {{module.description}}
            </h3>
          </mat-card-content>
        </span>
    </mat-card>
  </div>
</div>

Есть идеи?:)

Answer 1

Вот решение для вашей фактической структуры HTML:

.container {
  display: flex;
  align-items: stretch;
  width: 400px; /* just for example */
}

.item {
  display: flex; /* set height 100% for children */
  flex: 1 1 100%;  
  margin: 10px;
}

.card {
  height: 100%;
  width: 100%;
  background: red;
}

<div class="container">
  <div class="item">
    <div class="card">short text</div>
  </div>
  <div class="item">
    <div class="card">text</div>
  </div>
  <div class="item">
    <div class="card">Setting flexbox items with same width and height based on the tallest child</div>
  </div>
</div>

Но я бы порекомендовал вам установить директиву ngFor на mat-card, чтобы уменьшить количество вложенных элементов. И код будет выглядеть так:

.container {
  display: flex;
  align-items: stretch;
  width: 400px; // just for example
}

.card {
  flex: 1 1 100%;  
  margin: 10px;
  background: red;
}

<div class="container">
  <div class="card">short text</div>
  <div class="card">text</div>
  <div class="card">Setting flexbox items with same width and height based on the tallest child</div>
</div>