如何使引导行填充父容器的高度？

Question

在下面的示例中，我希望我的行用以下规则填充父容器的总高度：

• A=高度的2/6
• B=高度的1/6
• C=高度的3/6

在这里，我写的代码：

<div class="container border border-warning" style="height: 400px">
  <div id="a" class="row row-4 bg-primary">A</div>
  <div id="b" class="row row-2 bg-secondary">B</div>
  <div id="c" class="row row-3 bg-info">C</div>
</div>

https://codepen.io/anon/pen/mjoKpG

我应该如何处理这个问题？

Answer 1

添加这些CSS规则

.container {
    display: inline-flex;
    flex-flow: column;
}
.container > #a{
    flex:0.33 1;
}
.container > #b{
    flex:0.17 1;
}
.container > #c{
    flex:0.5 1;
}

Answer 2

使用高度百分比：

#a { height: 33%}
#b { height: 17%}
#c { height: 50%}

https://codepen.io/anon/pen/ejXKQg