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,
Yasir
Hello.
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 
(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