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

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>