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
https://codepen.io/rinrinnnn/pen/QWxGQRw
MIt'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.
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.
WThanks 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.
In his example. the height:% works.
Still confusing where the height's reference comes from.
MSo, in this case, I would assume the height is actually considering the height given by the text and the container.
MLet me try some cases.
MOkay, I understood it now.
MIt's just the parent that is flex.
MWhen the parent is flex, their child will adjust to the content inside of it.
MAnd if there's multiple flex-childs, they will try to adjust to each other.
MTo avoid this, you would need to align them so they don't stretch to the entirety of the parent.
MMHere you have an example, if you remove you will see the issue you mention.
WThank you. So do you mean in my example, the flex container provides a computable height as parent?
M"Technically", yes.
MIt's just trying to adjust to the content.