html - CSS flexbox : same height for all elements?

Question

使用 CSS 和 flexbox，我不明白如何为 div“a”和“b”赋予相同的高度。我需要 b 变得更高，以便匹配 a 的高度。换句话说，灰色框应该和红色框一样高。

据我了解，将 flex:1 设置为 a 和 b 就足够了，以便它们具有相同的高度。但事实并非如此。

我尝试将 flex-basis:0 设置为“a”和“b”，但内容被截断了。我不能截断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 version

Answer 1

如果您可以在没有 flex 的情况下生存，那么定位可以做到这一点。

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