css flexbox:所有元素的高度相同？

Question

使用CSS和flexbox,我不明白如何给div"a"和"b"赋予相同的高度.我需要b变得更高,以匹配一个高度.换句话说,灰色框应该与红色框一样高.

我的理解是,它足以设置flex:1为a和b,以使它们具有相同的高度.但事实并非如此.

我试图设置flex-basis:0为"a"和"b",但内容被截断.我不能截断一个,我需要扩大.

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

Answer 1

如果你可以在不弯曲的情况下生存，那么定位就可以做到这一点。

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