Gambai Gambai - 5 months ago 39
CSS Question

div after flex box is floating

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

.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 always be below the all the cards

this shows the footer where it currently is, which is incorrect
footer in wrong position

this shows the footer where I need it to be
enter image description here

Answer

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.

Comments