Why is my DIV block not 100% of parent element size?

Guys, can you help with this:

I cannot figure out why, when I set the width and height of a DIV to 100%, it does not take up the full space of its parent element, which in this case is a link block. Is there a particular setting required to make it work?

Thank you,


Read only link

This is because the div is wrapped in a Collection item + background image. So the height of the Collection List is determined by his content - a Link Block and his content, but not by the background image (which has no width and height off his one).

Thank you for taking the time. I think I follow what you mean, and I agree, but unless i’ve misunderstood I don’t think it answers my question.

In this case the height of the Link Block has been set to 350px. When I set the height of the child element (the recipe overlay block) to 100%, I’m expecting that it will occupy 350px in height as well. But this is not happening and I don’t understand why. Did you see the video?

It’s a bit of a quirk with min-height / min-width and inheriting stuff from parent divs with those attributes. You haven’t actually set the height of the link block div by using the min versions :slight_smile: (it’s kinda annoying, I know)

Luckily the fix is simple. Either set the actual height (which you probably don’t want) or make the link block div flex:

then the child (inner div with the text) “grow if possible”:

Thank you for this, Fonsume.

1 Like