Css flexbox: same height for all elements?

Question

Using CSS and flexbox, I don't understand how to give the same height divs "a" and "b". I need b to get taller to fit the height. In other words, the gray box should be as tall as the red square.

As I understand it, it was enough to install flex:1 for both a and b so that they have the same height. But this is not so.

I tried setting flex-basis:0 both "a" and "b", but the content is truncated. I cannot truncate a, I need b to be increased.

 #cont1{ display:flex; flex-direction:column; } #a{ background-color:red; flex:1; } #b{ background-color:grey; flex:1; } 

 <div id="cont1"> <div id="a"> <h1>title</h1> <h1>title</h1> <h1>title</h1> <h1>title</h1> <h1>title</h1> <h1>title</h1> </div> <div id="b"> short text </div> </div> 

JSFiddle version

Answer 1

If you can survive without flex, positioning can do it.

 #cont1{ } #a{ background-color:red; position: relative; } #b{ background-color:grey; position: absolute; left: 0; top: 100%; width: 100%; height: 100%; } 

 <div id="cont1"> <div id="a"> <h1> title </h1> <h1> title </h1> <h1> title title title title title title title title title</h1> <div id="b"> short text </div> </div> </div> 

Answer 2

Specify the height of the flex container.

Try the following:

 #cont { display: flex; flex-direction: column; height: 400px; } 

You need to create a certain space for flexible elements for distribution.

---

UPDATE (based on comments)

right ... here is what I need to achieve: http://www.jsfiddle.net/s2b0v4ph (watch on the wide screen because there is a breakpoint)

and here’s the problem: if field No. 2 gets higher, the alignment is split between field No. 2 and field No. 5: http://www.jsfiddle.net/s2b0v4ph/1

The layout works fine, as encoded. The flexibility elements of the primary flexible container ( .flex-md ) stretch the entire height of the container. No matter how much content you add in field No. 1 or field No. 2, the column containing fields No. 5 and No. 6 will be equal to the height.

All columns in the main flex container ( <div class="row flex-md" id="row-quadrati"> ) are equal in height, regardless of the amount of content. http://jsfiddle.net/s2b0v4ph/1/

The reason field 5 is not aligned with field 2 when adding content is because each of these boxes exists in a different flex formatting context . In other words, boxes exist in different flexible containers.

In particular, boxes # 1, # 2, and # 3 are flexible elements #quadr-col-1 , while boxes # 4, # 5, and # 6 use flexible elements #quadr-col-2 . Both #quadr-col-1 and #quadr-col-2 are flexible elements of the primary flexible container, which themselves double as (nested) flexible containers.

Since these boxes exist in separate flexible containers, there is no reason for them to be of equal height. If you want a flexible equal height function to be applied, put all of them in the same flex container.

Answer 3

Trick of this part

 .xyz { width: 70%; box-shadow: 0 0 30px; text-align:center; -webkit-flex: 9 0 0; flex: 9 0 0; } 

http://codepen.io/damianocel/pen/XmxmQE

Now these divs will have the same height, regardless of the height of all pages.

Is this what you were looking for?

Answer 4

I solved the problem in javascript as follows, but I'm still interested in the css solution:

 function computeMaxHeight(els) { var ht = 0; els.forEach(function (el) { var elht = el.height(); if (elht > ht) { ht = elht; } }); return ht; } function setMinMeight(els) { var maxht = computeMaxHeight(els); //console.log("here resize. maxht = " + maxht); els.forEach(function (el) { el.css('min-height', maxht); }); } $(document).ready(function () { var els = [$("#non-porre-limiti"), $("#we-love-pagi"), $("#vuoto"), $("#pagiletter"), $("#pagi-focus")]; $(window).on('resize', function () { setMinMeight(els); }); setMinMeight(els); }); 

script: http://jsfiddle.net/s2b0v4ph/3/