Footer not aligning below main content in flexbox

Question

I'm using flexbox to responsively lay out a bunch of images.

.cards
  .card.card1
  .card.card2
  .card.card3
  .card.card4
   etc....
footer

css:

 .cards{
   display: flex;
   width: 100%;
   flex-wrap: wrap;
   height: 81.2rem;
}

 .card{
   display: flex;
   flex-wrap: wrap;
   height: 100%;
   max-height: 28rem;
   position: relative;
 }

The problem I'm having is...

I have a footer that needs to be below the .cards div, but since .cards has a height, the footer is hovering over the div where I tell the height to be. (The cards themselves extend past the height.)

I have tried setting a taller height, however, then the space between the rows of cards expand (which I don't want). I've also tried not setting a height, but then the cards don't lay out at all, they just disappear or float way down the page.

Is there a way I can clear the .cards div?

Or just in general, get the footer to appear below the cards?

This shows the footer where it currently is, which is incorrect.

This shows the footer where I need it to be:

Can you create a working fiddle? It's hard to figure out exactly what's wrong with the given code. — Hunter Turner, Jun 16 '16 at 19:04
talk about a nightmare, my css is doing too much to simplify — Gambai, Jun 16 '16 at 20:07
I know, but I tried, it's going to take forever, I have a lot of responsive styles that are all done in sass. it's makes reading the css impossible — Gambai, Jun 16 '16 at 20:11
but nothing comes to mind? I feel like this is kind of default flex box behavior — Gambai, Jun 16 '16 at 20:11
Instead of `height: 100%`, which limits the container to a fixed height, use `min-height: 100%` or remove `height` altogether. If your `height` property is installed properly, you may need to apply the `min-height` to parent or ancestor elements. — Michael Benjamin, Jun 16 '16 at 20:22
I think michael_B is right. it definitely has to do with the height. I think I was stuck on an old css principle where I would set the height of a div to 100% and then limit the height of the div with a max-height property. in the end, I removed the height of the .cards div and set a height on the individual .card elements themselves thanks for all the help! — Gambai, Jun 16 '16 at 20:55

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

Instead of height: 100%, which limits the container to a fixed height, use min-height: 100% or remove height altogether.

If your height property is installed properly, you may need to apply the min-height to parent or ancestor elements.

More details: Working with the CSS height property and percentage values

Additional notes from OP:

Add the height to the direct children of the flex-box, this allows the container to determine its height.

On another note, if you put the height on the sub-children (not direct descendants), the container flex-box will not know how to set its own size and will have no height.

Footer not aligning below main content in flexbox

1 Answers1