2

I have a problem with flexbox. When I create equal columns with flex and some of the columns have larger height, then child div with image will get some white space and I don't know where this is coming from.

As you can see from my code the red background in .card-thumb there is wrong height. So how to fix that?

Here is my pen: http://codepen.io/woosaj/pen/bZjyRP

.container {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-flow: row wrap;
    background: rgba(2552,255,255,.1)
}

.column {
    display: flex;
    flex: 0 0 33.33333%;
    padding-left: 0.3125rem;
    padding-right: 0.3125rem;
    max-width: 33.33333%;

}

.card {
    background: #fff;
    display: flex;
    flex-flow: row wrap;
    .card-thumb {
        width: 100%;
        background: red;
    }

}

img {
    max-width: 100%;
    display: block;
}
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
MordFustang
  • 63
  • 1
  • 7

2 Answers2

2

An initial setting of a flex container is align-content: stretch.

This means that multiple lines in a flex container will expand to fill the size of the container.

Because your container is flex-direction: row and you've enabled flex-wrap: wrap, the align-content property distributes the wrapped items vertically (along the cross-axis).

With the stretch default, the div with the red background is expanding relative to its siblings in order to fill the container height. (If you add a background color to all flex items, you'll notice that together they fill the container.)

Instead, use align-content: flex-start or space-between.

The next problem you'll face is that .bottom no longer respects align-self: flex-end.

To tackle that issue, I would recommend switching the container's flex-direction to column and applying margin-top: auto to .bottom. More details:

Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • 1
    Hey, thanks for that explanation. I used on `.card` `flex-direction: column wrap` and `margin-top: auto` on `.bottom` div as you said, and this is working fine, so i'll stick with this solution. – MordFustang Aug 01 '16 at 16:51
0

In style .card change the display:flex; to flex:1;. This will help you.

body {
    background: #000;
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-flow: row wrap;
    background: rgba(2552,255,255,.1)
}

.column {
    display: flex;
    flex: 0 0 33.33333%;
    padding-left: 0.3125rem;
    padding-right: 0.3125rem;
    max-width: 33.33333%;

}

.card {
    background: #fff;
    flex:1;
    flex-flow: row wrap;
    .card-thumb {
        width: 100%;
        background: red;
    }

}

img {
    max-width: 100%;
    display: block;
}
Nehemiah
  • 1,063
  • 7
  • 15