Fileiras de altura igual em um flex container

Question 1

Como você pode ver, list-itemso primeiro rowtem o mesmo height. Mas os itens do segundo rowsão diferentes heights. Quero que todos os itens tenham um uniforme height.

Existe alguma maneira de conseguir isso sem dar altura fixa e usando apenas o flexbox ?

Aqui está o meu 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>

Expandir snippet

Question 2

A resposta é não.

O motivo é fornecido na especificação do flexbox:

6. Flex Lines

Em um contêiner flexível com várias linhas, o tamanho cruzado de cada linha é o tamanho mínimo necessário para conter os itens flexíveis na linha.

Em outras palavras, quando há várias linhas em um flex container baseado em linha, a altura de cada linha (o "tamanho cruzado") é a altura mínima necessária para conter os flex items na linha.

Linhas de altura igual, no entanto, são possíveis no layout de grade CSS:

Linhas de altura igual no layout de grade CSS

Caso contrário, considere uma alternativa de JavaScript.

Question 3

Você pode fazer isso agora com 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>

Expandir snippet

Embora a grade em si não seja flexbox, ela se comporta de forma muito semelhante a um contêiner flexbox e os itens dentro da grade podem ser flex .

O layout da grade também é muito útil no caso de você desejar grades responsivas. Ou seja, se você quiser que a grade tenha um número diferente de colunas por linha, basta alterar 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

e assim por diante...

Você pode misturá-lo com consultas de mídia e alterar de acordo com o tamanho da página.

Infelizmente, ainda não há suporte para consultas de contêiner / consultas de elemento nos navegadores (pronto para uso) para fazer funcionar bem com a alteração do número de colunas de acordo com o tamanho do contêiner, não para o tamanho da página (isso seria ótimo de usar com componentes da web reutilizáveis).

Mais informações sobre o layout da grade:

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

Suporte do layout de grade em navegadores:

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

Question 4

Não, você não pode conseguir isso sem definir uma altura fixa (ou usar um script).

Aqui estão duas respostas minhas, mostrando como usar um script para conseguir algo assim:

Como obter header de cards ou similar para ter a mesma altura com flex box?
Mesma altura para itens flexíveis no recipiente flexível da coluna de direção flexível

Question 5

Isso parece estar funcionando em casos com altura parental fixa (testado no Chrome e 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;
}

Se não for possível usar grades por algum motivo, talvez seja a solução.

Question 6

Se você conhece os itens que está mapeando, pode fazer isso fazendo uma linha de cada vez . Eu sei que é uma solução alternativa, mas funciona.

Para mim, eu tinha 4 itens por linha, então dividi em duas linhas de 4 com cada linha height: 50%, se livrar de flex-grow, ter <RowOne />e <RowTwo />em um <div>com flex-column. Isto irá fazer o truque

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

Question 7

No seu caso, a altura será calculada automaticamente, então você deve fornecer a altura para
usar este

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

Question 8

Você pode com o 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>

Expandir snippet

Question 9

você pode fazer isso fixando a altura da tag "P" ou fixando a altura do "item da lista".

Eu fiz fixando a altura de "P"

e o estouro deve ser escondido.

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

Question 10

para a mesma altura, você deve alterar as propriedades de "exibição" do css. Para obter mais detalhes, consulte o exemplo 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>