CODEWITHSUNDEEP
cssflexbox
musicformellons
musicformellons

Reputation: 13383

Flexbox max-height percentage value somehow related to the parent container percentage value

I have following flexbox fiddle which works. In the CSS I am setting the max-height of the transparant banner at 25%, in the output the image (flexbox container) is covered 50%, see here:

here

Why is that? I would expect it to be covered for 25%?

After some trial and error I notice that the 50% min-height of the image (the container for the banner) is somehow multiplied by the 50% I want to be covered, resulting in 25%. Still I do not get why this is...?

So in short: Why is the transparant banner cover 50% instead of 25%?

Upvotes: 2

Views: 1576

Answers (1)

musicformellons
musicformellons

Reputation: 13383

agrm is right, the 100vh is inherited to the childeren. To solve this and get expected behavior you need to not just set min-height to 50% but also set height to 50% (both in the parent-container, i.e. .item-image). Then the output will show a 25% coverage by the transparant banner.

This can be considered best practice as it will provide 'consistent layout behavior' in case there is suddenly just 1 div element (instead of two) in the viewport. This one element will then be stretched in height by flexbox to fullscreen height and the transparant banner will still cover it for 25%. Whereas in case of not setting the height on the parent-container I ended up with a banner which persisted its seize resulting in a too small banner height (12.5%) relative to the image.

Upvotes: 2

Related Questions