0

I love flexbox and I love bootstrap also. But looks like flexbox features is kind of useless with bootstrap flex for some frequent cases and a lot of custom tweaking is required

For example I use .col-**-* to make grid and add child classes for custom styles, like background My common problem with nested child is that child doesn't behave as flex child and do not fill the container.

I have to add .child block do .col-**-* to make background and tweak margin/paddings, which is not very handy. Are there any better ways to do so?

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

// demo .col-sm-6 padding-top: 20px padding-bottom: 20px background: black border: 1px solid red // OK - it's same height and stretched

.child
  color: white
  padding: 30px
  &--red
    background: tomato
  &--blue
    background: blue
    //this one is not same height
Sergey Khmelevskoy
  • 2,429
  • 3
  • 19
  • 43
  • Could you let me know what is not working with the answer a gave, so I will be able to adjust and you to accept? – Asons Jan 28 '17 at 07:31

1 Answers1

1

By using display: flex and flex: 1 / flex-basis: 100% it grows

.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

Or like this, using flex-direction: column and 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

Asons
  • 84,923
  • 12
  • 110
  • 165
  • I got it. Does the .col-sm-6 behave as flex child of row also in that case? So col-** becomes both flex container and flex child, right? – Sergey Khmelevskoy Jan 28 '17 at 12:34
  • @SergeyKhmelevskoy If `.row` will have `display: flex`, then `.col-sm-6` will become both a flex container and a flex child – Asons Jan 28 '17 at 12:49