MordFustang MordFustang -5 years ago 148
HTML Question

Flexbox equal height white space issue

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

there is wrong height. So how to fix that?

Here is my pen:

.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;

Answer Source

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:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download