具有 Flexbox 和嵌套 Div 的等高列

Question

我目前正在尝试创建一行三个等高列，其中所有 div 都与最高的 div 相同，即文本最多的 div。我尝试添加 flex: 1 和 height: 100% 但我似乎无法让这些家伙的高度相等。这是我当前正在尝试的代码。您可能需要扩大宽度才能使它们排成一行。

* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.42857143;
  color: #565757;
}

.internal-icons-icon {
  margin: 20px 0;
   height: 100%;
}

.internal-icons-layout {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
}



.internal-icons-icon > div {
  padding: 30px;
  text-align: center;
  border: 1px solid #575859;
  color: #565757;
  text-decoration: none;
  box-shadow: 2px 4px 10px 8px rgb(0 0 0 / 10%);
}

.internal-icons-icon div {
  margin: 20px 0;

}

.internal-icons-content {
  font-size: 16px;
}

.internal-icons-title {
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
}

@media (min-width: 990px) {
  .internal-icons {
    display: flex;
    flex-direction: row;
  }

  .internal-icons-layout {
    display: flex;
    flex-wrap: wrap;
  }

  .internal-icons-icon {
    margin: 0;
    width: 33.333%;
    height: 100%;
    padding: 15px;
  }

  .internal-icons-content {
    flex: 1;
  }

}

<div class="internal-icons">
  <div class="internal-icons-layout">
    <div class="internal-icons-icon">
      <div>
        <div class="internal-icons-image">
          <img src="https://img.icons8.com/fluency/85/000000/money.png" />
        </div>
        <div class="internal-icons-title">
          Lorem Ipsum Dolor
        </div>
        <div class="internal-icons-content">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>
      </div>
    </div>
    <div class="internal-icons-icon">
      <div>
        <div class="internal-icons-image">
          <img src="https://img.icons8.com/fluency/85/000000/money.png" />
        </div>
        <div class="internal-icons-title">
          Lorem ipsum dolor
        </div>
        <div class="internal-icons-content">
          Fusce cursus, risus eu rhoncus varius, ipsum massa eleifend libero, non accumsan elit felis et augue.
        </div>
      </div>
    </div>
    <div class="internal-icons-icon">
      <div>
        <div class="internal-icons-image">
          <img src="https://img.icons8.com/fluency/85/000000/money.png" />
        </div>
        <div class="internal-icons-title">
          Lorem ipsum dolor
        </div>
        <div class="internal-icons-content">
          Fusce cursus, risus eu rhoncus varius, ipsum massa eleifend libero, non accumsan elit felis et augue.
          <br />
          <strong>LOREM IPSUM DOLOR >></strong>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

从 .internal-icons-layout 中删除 height: 100% 并将其放在 .internal-icons-icon>div 上。

最嵌套的容器必须具有 100% 的高度，并且所有父容器都会自然扩展以适合您的 100% 高度容器，因此您只需将 100% 高度放在 .internal-icons-icon>div.现在，所有列都将扩展以适合弹性容器，该容器将与最高的列一样高。

还在 .internal-icons-icon 上添加了 flex-grow: 1 ，以便当您的列变成行时，它们会增长以填充宽度。

* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.42857143;
  color: #565757;
}

.internal-icons-icon {
  margin: 20px 0;
  height: 100%;
  flex-grow: 1;
}

.internal-icons-layout {
  display: flex;
  flex-wrap: wrap;
}

.internal-icons-icon>div {
  height: 100%;
}

.internal-icons-icon>div {
  padding: 30px;
  text-align: center;
  border: 1px solid #575859;
  color: #565757;
  text-decoration: none;
  box-shadow: 2px 4px 10px 8px rgb(0 0 0 / 10%);
}

.internal-icons-icon div {
  margin: 20px 0;
}

.internal-icons-content {
  font-size: 16px;
}

.internal-icons-title {
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
}

@media (min-width: 990px) {
  .internal-icons {
    display: flex;
    flex-direction: row;
  }
  .internal-icons-layout {
    display: flex;
    flex-wrap: wrap;
  }
  .internal-icons-icon {
    margin: 0;
    width: 33.333%;
    height: 100%;
    padding: 15px;
  }
  .internal-icons-content {
    flex: 1;
  }
}

<div class="internal-icons">
  <div class="internal-icons-layout">
    <div class="internal-icons-icon">
      <div>
        <div class="internal-icons-image">
          <img src="https://img.icons8.com/fluency/85/000000/money.png" />
        </div>
        <div class="internal-icons-title">
          Lorem Ipsum Dolor
        </div>
        <div class="internal-icons-content">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>
      </div>
    </div>
    <div class="internal-icons-icon">
      <div>
        <div class="internal-icons-image">
          <img src="https://img.icons8.com/fluency/85/000000/money.png" />
        </div>
        <div class="internal-icons-title">
          Lorem ipsum dolor
        </div>
        <div class="internal-icons-content">
          Fusce cursus, risus eu rhoncus varius, ipsum massa eleifend libero, non accumsan elit felis et augue.
        </div>
      </div>
    </div>
    <div class="internal-icons-icon">
      <div>
        <div class="internal-icons-image">
          <img src="https://img.icons8.com/fluency/85/000000/money.png" />
        </div>
        <div class="internal-icons-title">
          Lorem ipsum dolor
        </div>
        <div class="internal-icons-content">
          Fusce cursus, risus eu rhoncus varius, ipsum massa eleifend libero, non accumsan elit felis et augue.
          <br />
          <strong>LOREM IPSUM DOLOR >></strong>
        </div>
      </div>
    </div>
  </div>
</div>