Why this height100% works?
Good morning everyone. I'm confused why this <img> height:100% works without assigning a computable height to its parent?
https://codepen.io/rinrinnnn/pen/QWxGQRw
5 Replies
It's because of the width.
It's using the width as reference, and filling up the remaining space.
Now, exactly why, not sure. But my fair assumption would be that it's using (or trying to mimic) an aspect ratio.
Thanks for replying. I make a reproduction but the height:% does not work while the width:% works.
In his example. the height:% works.
Still confusing where the height's reference comes from.
So, in this case, I would assume the height is actually considering the height given by the text and the container.
Let me try some cases.
Okay, I understood it now.
It's just the parent that is flex.
When the parent is flex, their child will adjust to the content inside of it.
And if there's multiple flex-childs, they will try to adjust to each other.
To avoid this, you would need to align them so they don't stretch to the entirety of the parent.
https://codepen.io/myntsu/pen/poKRXry
Here you have an example, if you remove
align-items: center you will see the issue you mention.Thank you. So do you mean in my example, the flex container provides a computable height as parent?
"Technically", yes.
It's just trying to adjust to the content.