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

有没有办法说“test1.1”行仅在CSS中与“test1 test1 test1 test1 test1”行的高度相同？如果“测试2”行包含更多文本，“测试2.1”行的高度应与“测试2”相同

HTML结构和标记应该保持原样

编辑：或者有没有一种简单的方法可以用JS来完成

.outer{
显示器：flex；
宽度：200px；
}
.inner{flex:150%}
.内心的孩子{
背景颜色：浅灰色；
填充：10px；
边框：1个点；
}

测试1测试1测试1测试1测试1测试1
测试2
测试3
测试4
测试1.1
测试2.1
测试3.1
测试4.1

稍微更改html并在内部类中添加

display:flex

，您可以执行类似于所需的操作。以下是一个例子：

.outer{
宽度：200px；
}
.内部{
显示器：flex；
宽度：100%；
}
.内心的孩子{
宽度：50%；
背景颜色：浅灰色；
填充：10px；
边框：1个点；
}

测试1测试1测试1测试1测试1测试1
测试1.1
测试2
测试2.1

由简单jQuery完成

$（“.outer.inner:first.inner子项”）。每个（函数（即）{
i+=1；
if（$（“.outer.inner:last.inner子级：第n个子级（“+i+”））.length）
{
var heightInFirst=$（this）.height（）；
var heightInSecond=$（“.outer.inner:last.inner子级：第n个子级（“+i+”））.height（）；
$（“.outer.inner.inner子级：第n个子级（“+i+”））.css（“height”，Math.max（heightInFirst，heightinsectond）+“px”）；
}
});
.outer{
显示器：flex；
宽度：200px；
}
.inner{flex:150%}
.内心的孩子{
背景颜色：浅灰色；
填充：10px；
边框：1个点；
}

测试1测试1测试1测试1测试1测试1
测试2
测试3
测试4
测试1.1
测试2.1
测试3.1
测试4.1
< /代码> 你应该考虑使用.< /p>
Flexbox设计用于创建水平或垂直的一维阵列

而css网格设计用于容纳二维阵列（同时水平和垂直）


.outer{
显示：网格；
网格模板柱：1fr 1fr；
宽度：200px；
}
.内心的孩子{
背景颜色：浅灰色；
填充：10px；
边框：1个点；
}

测试1测试1测试1测试1测试1测试1
测试1.1
测试2
测试2.1
测试3
测试3.1
测试4
测试4.1
不可能，因为它们不相关，您应该更改HTML结构，它们需要成为兄弟，或者使用JS。标记是否需要这样做？如果不是的话，我建议您对子元素使用绝对位置（1.1、2.1、3.1、4.1），而不是将它们分成两个不同的元素。问题是，标记和HTML结构应该保持这样……然后您需要使用javascript。我要说的是，用这种标记结构是不可能实现您所需要的是的，我已经尝试过了，但是我不可能改变html结构，因为它是template@RickH. 可惜我以前没读过。那么除了JS/jQuery没有别的方法了。