css - flexbox + bootstrap 4. 如何拉伸(stretch).col-**-* 的child？

Question

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

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

我必须添加 .child block 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 纯红色 //OK - 相同的高度和拉伸(stretch)

.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