why is height: 100%; not working?
Hey, I have a flex container with an image and text. I'd like the image (it's in a div so the div) to take up the full height of the parent container however it doesn't seem to work? it only works with
min-height. I don't understand why this is happening? It has the room to grow since the parent container is the height of the text. Unless in this case 100% means the content? Thanks in advance.
https://codepen.io/deerCabin/pen/wvLZdEe3 Replies
Try align-items: stretch; on the parent (.flex) and remove the height from the child (.image-container)
yeah that did it, i had that at one point and it didn't work but now it did haha, thank you.
Or you should be safe with just removing the height from .image-container and let the img tag set the rule. Not sure when the child is a flex-item what really happens for the height :/