Равная высота на контейнерах, но с Display Flex

Question

моя проблема: у меня есть 3 контейнера с флекс-боксом, но я бы не стал добавлять текст в один из них, это больше высоты, но другой контейнер больше высоты. Мой код:

.teaminfo {
  display: flex;
  justify-content: space-around;
  padding-top: 1em;
  height: 400px;
}

.teaminfo-div {
  display: table-cell;
  border: 2px black solid;
  border-radius: 1em;
  text-align: center;
  align-self: flex-end;
  width: 25%;
  overflow: hidden;
}

.teaminfo-div:nth-child(2) {
  align-self: baseline;
}

<div class="teaminfo">
  <div class="teaminfo-div">
    <h2>Baguette</h2>
    <img src="image/logo.png" width="100px" height="100px">
    <p>Your contribution what you do lol</p>
  </div>
  <div class="teaminfo-div">
    <h2>Baguette</h2>
    <img src="image/logo.png" width="100px" height="100px">
    <p>Your contribution what you do lol</p>
  </div>
  <div class="teaminfo-div">
    <h2>Baguette</h2>
    <img src="image/logo.png" width="100px" height="100px">
    <p style="font-size: 1.5em; padding: 0 1em 0 1em;">Your contribution what you do lol</p>
  </div>
</div>

Результат:

Экран

Answer 1

Применяйте этот CSS и всегда пишите меньше кода для лучшей производительности

.teaminfo
{
    display: flex;
    justify-content: space-around;
    padding-top: 1em;
}

.teaminfo-div
{   display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px black solid;
    border-radius: 1em;
    width: 25%;
}

.teaminfo-div:nth-child(2) {
    transform: translate(0%, -100%);
}

Answer 2

Правильно используйте flexbox: в основном все, что вам нужно сделать для flex-children равной высоты, установлено display: flex на родительском элементе.Вы устанавливаете связку align-self для потомков, а также фиксированную высоту для родителя.Удалить все это.

.teaminfo
{
    display: flex;
    justify-content: space-between;
    padding-top: 1em;
}

.teaminfo-div
{
    height: auto;
    border: 2px black solid;
    border-radius: 1em;
    text-align: center;
    width: 25%;
    overflow: hidden;
}

<div class="teaminfo">
            <div class="teaminfo-div">
                <h2>Baguette</h2>
                <img src="image/logo.png" width="100px" height="100px">
                <p>Your contribution what you do lol</p>
            </div>
            <div class="teaminfo-div">
                <h2>Baguette</h2>
                <img src="image/logo.png" width="100px" height="100px">
                <p>Your contribution what you do lol</p>
            </div>
            <div class="teaminfo-div">
                <h2>Baguette</h2>
                <img src="image/logo.png" width="100px" height="100px">
                <p style="font-size: 1.5em; padding: 0 1em 0 1em;">Your contribution what you do lol</p>
            </div>
        </div>
My CSS:

Answer 3

Чтобы подделать макет из flex, вам потребуется либо позиционировать, либо трансформировать, а не выравнивать свойства flex.

возможный компромисс.

.teaminfo {
  display: flex;
  justify-content: space-around;
  min-height: 300px;/* maybe wiserr than just height */
  padding-top:120px;/* whatever, depends on how much difference you want*/
}

.teaminfo-div {
  /*display: table-cell; really needed ? */
  border: 2px black solid;
  border-radius: 1em;
  text-align: center;
  width: 25%;
  /*overflow: hidden; really needed ? */
}

.teaminfo-div:nth-child(2) {
  position:relative;/* or use transform */
  top:-100px;
}

<div class="teaminfo">
  <div class="teaminfo-div">
    <h2>Baguette</h2>
    <img src="image/logo.png" width="100px" height="100px">
    <p>Your contribution what you do lol</p>
  </div>
  <div class="teaminfo-div">
    <h2>Baguette</h2>
    <img src="image/logo.png" width="100px" height="100px">
    <p>Your contribution what you do lol</p>
  </div>
  <div class="teaminfo-div">
    <h2>Baguette</h2>
    <img src="image/logo.png" width="100px" height="100px">
    <p style="font-size: 1.5em; padding: 0 1em 0 1em;">Your contribution what you do lol</p>
  </div>
</div>