如何为显示 flex 子项设置相同的高度？

Question

Is there any way to say that the "TEST 1.1" row get the same height as the "TEST 1 TEST 1 TEST 1 TEST 1 TEST 1" only with CSS? Same should be if the "TEST 2" row includes more Text, the "TEST 2.1" row should be as height as "TEST 2".

The HTML Structure and Markup should stay like it is.

Edit: Or is there an easy way to do it with 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

You should consider using css grid .

Flexbox was design to create a one dimensional array either horizontally or vertically.

While css grid was designed to accomodate two dimensional arrays (Both horizontal and vertical simultaneously.)

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

Changing a little the html and adding display: flex in inner class you can do something similar to what you're looking for. Here is an example:

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

Answer 3

Done by simple 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>