flexbox + bootstrap 4. 如何拉伸 .col-**-* 的子级？

Question

我喜欢 flexbox，我也喜欢 bootstrap。但看起来 flexbox 的功能对于一些常见的情况来说对于 bootstrap flex 来说是无用的，并且需要进行大量的自定义调整

例如，我使用.col-**-* 制作网格并为自定义样式添加子类，例如背景 我对嵌套子节点的常见问题是子节点的行为不像弹性子节点并且不会填充容器。

我必须添加 .child 块 do .col-**-* 来制作背景和调整边距/填充，这不是很方便。有没有更好的方法？

http://codepen.io/dpmango/pen/VPKKMw

body
  .row
    .col-sm-6
      .child.child--red
        p This block is bigger than sibling! This block is bigger than sibling! This block is bigger than sibling! This block is bigger than sibling! This block is bigger than sibling! 
    .col-sm-6
      .child.child--blue
        p I want to grow :-

CSS

// 演示 .col-sm-6 上边距：20px 填充底部：20px 背景：黑色 边框：1px 纯红色 // 好的 - 它的高度相同并被拉伸

.child
  color: white
  padding: 30px
  &--red
    background: tomato
  &--blue
    background: blue
    //this one is not same height

Answer 1

通过使用 display: flex 和 flex: 1 / flex-basis: 100% 它会增长

.col-sm-6
  padding-top: 20px
  padding-bottom: 20px
  background: black
  border: 1px solid red
  display: flex

.child
  flex: 1                      /*  fill remaining height  */
  flex-basis: 100%             /*  set full width         */

Updated codepen

或者像这样，使用flex-direction: column和flex: 1

.col-sm-6
  padding-top: 20px
  padding-bottom: 20px
  background: black
  border: 1px solid red
  display: flex
  flex-direction: column       /*  full width by default  */

.child
  flex: 1                      /*  fill remaining height  */

Updated codepen 2