css flexbox: same height for all elements?

Question

Using CSS and flexbox, I don't understand how to give the same height to divs "a" and "b". I need b to become taller so as to match a's height. In other words, the grey box should be as tall as the red box.

It was my understanding that it was enough to set flex:1 to both a and b, in order for them to have same height. But it is not so.

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

#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

The trick is 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, no matter the overall pages height.

Is this what you have looked for?

Answer 2

Specify a height for the flex container.

Try this:

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

You need to create a defined space for the flex items to distribute.

---

UPDATE (based on comments)

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

and here is the problem: if the box #2 becomes taller, the alignment is broken between box #2 and box #5: http://www.jsfiddle.net/s2b0v4ph/1

The layout is working perfectly, as coded. The flex items of the primary flex container (.flex-md) are stretching the full-height of the container. No matter how much content you add to box #1 or box #2, the column containing boxes #5 and #6, will be equal height.

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

The reason that box #5 does not align with box #2 when content is added is that each of those boxes exists in a different flex formatting context. In other words, the boxes exist in different flex containers.

Specifically, boxes #1, #2 and #3 are flex items of #quadr-col-1, and boxes #4, #5 and #6 are flex items of #quadr-col-2. Both #quadr-col-1 and #quadr-col-2 are flex items of the primary flex container, doubling as (nested) flex containers, themselves.

Because these boxes exist in separate flex containers there is no reason for them to share equal height. If you want the flex equal height feature to apply, put them all in the same flex container.

Answer 3

I solved the problem in javascript as follows, but I am still interested in a 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);

});

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

Answer 4

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

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