Равные строки высоты в гибком контейнере

Как вы можете видеть, list-items в первом row имеют одинаковый height. Но элементы во втором row имеют разные heights. Я хочу, чтобы все элементы имели форму height.

Есть ли способ достичь этого без предоставления фиксированной высоты и только с помощью flexbox?

Вот мой 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>

Ответ 1

Ответ НЕТ.

Причина указана в спецификации flexbox:

6. Линии Flex

В многострочном гибком контейнере кросс-размер каждой строки является минимальным размером, необходимым для размещения элементов гибкости на линии.

Другими словами, когда в контейнере гибких строк имеется несколько строк, высота каждой строки ( "кросс-размер" ) является минимальной высотой, необходимой для размещения элементов гибкости на линии.

В таблице CSS Grid Layout возможны равные строки высоты:

Равные строки высот в макете сетки CSS

В противном случае рассмотрим альтернативу JavaScript.

Ответ 2

Нет, вы не можете достичь этого, не устанавливая фиксированную высоту (или используя script).

Ответ 3

Если вы знаете элементы, которые вы просматриваете, , вы можете выполнить это, выполнив одну строку за раз. Я знаю, что это обходной путь, но он работает.

Для меня у меня было 4 элемента в строке, поэтому я разбил их на две строки по 4 с каждой строкой height: 50%, избавился от flex-grow, имеет <RowOne /> и <RowTwo /> в <div> с flex-column. Это сделает трюк

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

Ответ 4

В вашем случае высота будет вычисляться автоматически, поэтому вы должны указать высоту используйте это

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

Ответ 5

вы можете сделать это, установив высоту тега "P" или установив высоту "списка".

Я сделал, установив высоту "P"

и переполнение должно быть скрыто.

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

Ответ 6

для той же высоты вы должны использовать свой "css" display "Properties. Более подробно см. Приведенный пример.

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