Как установить одинаковую высоту для показа flex childs?

Question

Можно ли сказать, что строка "TEST 1.1" получает ту же высоту, что и "TEST 1 TEST 1 TEST 1 TEST 1 TEST 1" только с CSS?То же самое должно быть, если строка «ТЕСТ 2» содержит больше текста, строка «ТЕСТ 2.1» должна быть такой же высоты, как и «ТЕСТ 2».

Структура HTML и разметка должны оставаться такими, как есть.

Редактировать: Или есть простой способ сделать это с помощью JS?

.outer {
  display: flex;
  width: 200px;
}

.inner {flex: 1 1 50%}

.inner-child {
  background-color: lightgrey;
  padding: 10px;
  border: 1px dotted;
}

<div class="outer">
  <div class="inner">
    <div class="inner-child">
      TEST 1 TEST 1 TEST 1 TEST 1 TEST 1
    </div>
    <div class="inner-child">
      TEST 2
    </div>
    <div class="inner-child">
      TEST 3
    </div>
    <div class="inner-child">
      TEST 4
    </div>
  </div>
   <div class="inner">
     <div class="inner-child">
       TEST 1.1
    </div>
     <div class="inner-child">
       TEST 2.1
    </div>
     <div class="inner-child">
       TEST 3.1
    </div>
     <div class="inner-child">
       TEST 4.1
    </div>
  </div>
</div>

Answer 1

Выполнено простым jQuery

$(".outer .inner:first .inner-child").each(function(i,e){
    i += 1;
    if($(".outer .inner:last .inner-child:nth-child("+i+")").length)
    {
      var heightInFirst = $(this).height();
      var heightInSecond = $(".outer .inner:last .inner-child:nth-child("+i+")").height();

      $(".outer .inner .inner-child:nth-child("+i+")").css("height",Math.max(heightInFirst, heightInSecond)+"px");
    }
  });

.outer {
  display: flex;
  width: 200px;
}
.inner {flex: 1 1 50%}

.inner-child {
  background-color: lightgrey;
  padding: 10px;
  border: 1px dotted;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
  <div class="inner">
    <div class="inner-child">
      TEST 1 TEST 1 TEST 1 TEST 1 TEST 1
    </div>
    <div class="inner-child">
      TEST 2
    </div>
    <div class="inner-child">
      TEST 3
    </div>
    <div class="inner-child">
      TEST 4
    </div>
  </div>
   <div class="inner">
     <div class="inner-child">
       TEST 1.1
    </div>
     <div class="inner-child">
       TEST 2.1
    </div>
     <div class="inner-child">
       TEST 3.1
    </div>
     <div class="inner-child">
       TEST 4.1
    </div>
  </div>
</div>

Answer 2

Вам следует рассмотреть возможность использования css grid .

Flexbox был спроектирован для создания одномерного массива либо по горизонтали, либо по вертикали.

В то время как css grid был разработан для размещения двухразмерные массивы (горизонтальные и вертикальные одновременно.)

.outer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 200px;
}

.inner-child {
  background-color: lightgrey;
  padding: 10px;
  border: 1px dotted;
}

<div class="outer">
  <div class="inner-child">
    TEST 1 TEST 1 TEST 1 TEST 1 TEST 1
  </div>
  <div class="inner-child">
    TEST 1.1
  </div>
  <div class="inner-child">
    TEST 2
  </div>
  <div class="inner-child">
    TEST 2.1
  </div>
  <div class="inner-child">
    TEST 3
  </div>
  <div class="inner-child">
    TEST 3.1
  </div>
  <div class="inner-child">
    TEST 4
  </div>
  <div class="inner-child">
    TEST 4.1
  </div>
</div>

Answer 3

Немного изменив HTML и добавив display: flex во внутренний класс, вы можете сделать что-то похожее на то, что вы ищете.Вот пример:

.outer {
  width: 200px;
}

.inner {
  display: flex;
  width: 100%;
}

.inner-child {
  width: 50%;
  background-color: lightgrey;
  padding: 10px;
  border: 1px dotted;
}

<div class="outer">
  <div class="inner">
    <div class="inner-child">TEST 1 TEST 1 TEST 1 TEST 1 TEST 1</div>
    <div class="inner-child">TEST 1.1</div>
  </div>
  <div class="inner">
    <div class="inner-child">TEST 2</div>
    <div class="inner-child">TEST 2.1</div>
  </div>
</div>