javascript - 如何为 display flex childs 设置相同的高度？

Question

有没有什么办法可以说“TEST 1.1”行的高度与“TEST 1 TEST 1 TEST 1 TEST 1 TEST 1”的高度相同？如果“TEST 2”行包含更多文本，“TEST 2.1”行的高度应与“TEST 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

您应该考虑使用 css grid .

Flexbox 旨在创建水平或垂直的一维数组。

虽然 css 网格旨在容纳二维数组(同时水平和垂直。)

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