Who doesn't love a good CSS blowout in spite of giving an image container upper dimensions?

https://jsfiddle.net/4yc7jbwf/

CSS doesn't suck, you're just bad at it.

🍿

I’m not that much into CSS so as to be allowed to start yapping or something, but this seems like a simple “code not running as expected so I’ll consult the digital limbo for solutions” kind of scenario.

@Chewbanacas I doesn't take very much CSS proficiency to understand the absurdity in that a `max-height: 200px` parent will not contain a `max-height: 100%` child. You might just say "but that's how CSS works", and that's whole point.

@bostonfern well, no clue how to answer this other than that every language has its quirks. What’s the child max height in your case?

I think it should work if the parent is position: relative.

Mm maybe not. Or maybe the display prop is messing it up.

CSS feels like English. To properly write it you need an intuition and an experimental spirit rather than an accurate knowledge of the rules. To read it you need such an intricate knowledge of the rules that you can learn other people's intuition.

@spongessuck I shouldn't have left the `display` property there. It doesn't actually affect anything.

@Chewbanacas That would be `100%`. In this case, that means 100% of its parent's height, with some technical caveats as you can see above (a percentage values also means different things to different CSS properties, one of many quirks that makes the exercise of learning CSS a gift that keeps on giving).

@bostonfern Well you have 2 options :

You add an overflow: hidden on the DIV

or you change the max-height of the picture to inherit.

@Grumm Thanks for the suggestion.