Filas de igual altura en un contenedor flexible

Como puede ver, list-itemsel primero rowtiene lo mismo height. Pero los elementos del segundo rowtienen diferentes heights. Quiero que todos los artículos tengan uniforme height.

¿Hay alguna forma de lograr esto sin dar una altura fija y solo usando flexbox ?

Aquí está mi code

.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%;
}

<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>

La respuesta es no.

El motivo se proporciona en la especificación de flexbox:

6. Líneas flexibles

En un contenedor flexible de varias líneas, el tamaño cruzado de cada línea es el tamaño mínimo necesario para contener los elementos flexibles en la línea.

En otras palabras, cuando hay varias líneas en un contenedor flexible basado en filas, la altura de cada línea (el "tamaño cruzado") es la altura mínima necesaria para contener los elementos flexibles en la línea.

Sin embargo, las filas de igual altura son posibles en CSS Grid Layout:

• Filas de igual altura en el diseño de cuadrícula CSS

De lo contrario, considere una alternativa de JavaScript.

Puede 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 cuadrícula en sí no es flexbox, se comporta de manera muy similar a un contenedor de flexbox , y los elementos dentro de la cuadrícula pueden ser flexibles .

El diseño de la 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 simplemente 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í...

Puede mezclarlo con consultas de medios y cambiar según el tamaño de la página.

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

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

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

Compatibilidad con el diseño de cuadrícula en todos los 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 como eso:

• ¿Cómo conseguir que el encabezado de las tarjetas o similar tenga la misma altura con la caja flexible?

• Misma altura para artículos flexibles en el contenedor flexible de columna de dirección flexible

Si conoce los elementos que está mapeando, puede lograrlo haciendo una fila a la vez . Sé que es una solución alternativa, 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 una <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 funcionar en casos con una altura principal fija (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.

Con respecto a la solución alternativa interactiva mencionada en la primera respuesta ... Forzar que las columnas flexibles tengan la misma altura en todas las filas se puede hacer usando jQuery al cargar:

$(function () {
    // Set the cards height to be the same in all lines
    $('.same-wrap-height').each(function () {
        let heighest = 0;

        $('.new-card', this).each(function () {
            if ($(this).height() > heighest) {
                heighest = $(this).height();
            }
        });

        $('.new-card', this).height(heighest);
    });
});

Mi diseño de Bootstrap:

<div class="row same-wrap-height">
    <div class="col-lg-6 ... new-card">
        <div class="card h-100">
            ...
        </div>
    </div>

    <div class="col-lg-6 ... new-card">
        <div class="card h-100">
            ...
        </div>
    </div>
</div>

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

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

Puedes con flexbox:

ul.list {
    padding: 0;
    list-style: none;
    display: flex;
    align-items: stretch;
    justify-items: center;
    flex-wrap: wrap;
    justify-content: center;
}
li {
    width: 100px;
    padding: .5rem;
    border-radius: 1rem;
    background: yellow;
    margin: 0 5px;
}

<ul class="list">
  <li>title 1</li>
  <li>title 2<br>new line</li>
  <li>title 3<br>new<br>line</li>
</ul>

puede hacerlo fijando la altura de la etiqueta "P" o fijando la altura de "elemento de lista".

Lo 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 cambiar las Propiedades de "pantalla" de CSS. 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>