Filas de igual altura en un contenedor flexible

Puedes lograr eso ahora con display: grid:

.list {
  display: grid;
  overflow: hidden;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  max-width: 500px;
}
.list-item {
  background-color: #ccc;
  display: flex;
  padding: 0.5em;
  margin-bottom: 20px;
}
.list-content {
  width: 100%;
}

<ul class="list">
  <li class="list-item">
    <div class="list-content">
      <h2>box 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>

  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor</p>
    </div>
  </li>

  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h1>h1</h1>
    </div>
  </li>
</ul>

Aunque la rejilla en sí no es flexbox, se comporta muy similar a un contenedor flexbox, y los elementos dentro de la rejilla pueden ser flex.

El diseño de cuadrícula también es muy útil en el caso de que desee cuadrículas receptivas. Es decir, si desea que la cuadrícula tenga un número diferente de columnas por fila, puede cambiar grid-template-columns:

grid-template-columns: repeat(1, 1fr); // 1 column
grid-template-columns: repeat(2, 1fr); // 2 columns
grid-template-columns: repeat(3, 1fr); // 3 columns

Y así sucesivamente...

Puedes mézclalo con media queries y cambia según el tamaño de la página.

Lamentablemente todavía no hay soporte para consultas de contenedor / consultas de elemento en los navegadores (fuera de la caja) para que funcione bien con el cambio del número de columnas de acuerdo con el tamaño del contenedor, no al tamaño de página (esto sería genial para usar con componentes web reutilizables).

Más información sobre la cuadrícula diseño:

Https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

Soporte para el diseño de Cuadrícula a través de navegadores:

Https://caniuse.com/#feat=css-grid

No, no puede lograr eso sin establecer una altura fija (o usar un script).

Aquí hay 2 respuestas mías, que muestran cómo usar un script para lograr algo así:

• ¿Cómo obtener el encabezado de las tarjetas o similar para tener la misma altura con flex box?

• La misma altura para los elementos flex en el contenedor flex de columna de dirección flex

Si conoce los elementos que está mapeando, puede lograr esto haciendo una fila a la vez. Sé que es una solución, pero funciona.

Para mí tenía 4 elementos por fila, así que lo dividí en dos filas de 4 con cada fila height: 50%, deshacerse de flex-grow, tener <RowOne /> y <RowTwo /> en un <div> con flex-column. Esto hará el truco

<div class='flexbox flex-column height-100-percent'>
   <RowOne class='flex height-50-percent' />
   <RowTwo class='flex height-50-percent' />
</div>

Esto parece estar funcionando en casos con altura fija del padre (probado en Chrome y Firefox):

.child {
        height    : 100%;
        overflow  : hidden;
}

.parent {
        display: flex;
        flex-direction: column;
        height: 70vh; // ! won't work unless parent container height is set
        position: relative;
}

Si no es posible usar grids por alguna razón, tal vez sea la solución.

En su caso la altura se calculará automáticamente, por lo que debe proporcionar la altura
utilice este

.list-content{
  width: 100%;
  height:150px;
}

Puede hacerlo fijando la altura de la etiqueta "P" o fijando la altura de "list-item".

He hecho fijando la altura de"P"

Y el desbordamiento debe estar oculto.

.list{
  display: flex;
  flex-wrap: wrap;
  max-width: 500px;
}

.list-item{
  background-color: #ccc;
  display: flex;
  padding: 0.5em;
  width: 25%;
  margin-right: 1%;
  margin-bottom: 20px;
}
.list-content{
  width: 100%;
}
p{height:100px;overflow:hidden;}

<ul class="list">
  <li class="list-item">
    <div class="list-content">
    <h2>box 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
    <h3>box 2</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>
  
    <li class="list-item">
    <div class="list-content">
    <h3>box 2</h3>
    <p>Lorem ipsum dolor</p>
    </div>
  </li>
  
    <li class="list-item">
    <div class="list-content">
    <h3>box 2</h3>
    <p>Lorem ipsum dolor</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h1>h1</h1>
    </div>
  </li>
</ul>

Para la misma altura, debe seleccionar sus propiedades css "display". Para más detalles vea el ejemplo dado.

.list{
  display: table;
  flex-wrap: wrap;
  max-width: 500px;
}

.list-item{
  background-color: #ccc;
  display: table-cell;
  padding: 0.5em;
  width: 25%;
  margin-right: 1%;
  margin-bottom: 20px;
}
.list-content{
  width: 100%;
}

<ul class="list">
  <li class="list-item">
    <div class="list-content">
    <h2>box 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
    <h3>box 2</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>
  
    <li class="list-item">
    <div class="list-content">
    <h3>box 2</h3>
    <p>Lorem ipsum dolor</p>
    </div>
  </li>
  
    <li class="list-item">
    <div class="list-content">
    <h3>box 2</h3>
    <p>Lorem ipsum dolor</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h1>h1</h1>
    </div>
  </li>