Mobile iOS safari : Percentage height inside of a vh height container

Question

I got a quick question.

Context: I have a container with it's height set in vh unit and inside of this container I am using a component. This component is using percentage height to be set up properly.

Issue: The height of my container is set properly, however anything percentage related is not. (ie. my container height = 500px while the component, which is set at 100% height, is way above that number).

The issue happens on iOS safari on tablet (I am using iOS 10.0.2) but everything works perfectly on a desktop pc.

I looked into work-arounds for this issue and it's always the same advice: "Set the height of the content to inherit" but it is something that I want to avoid as much as possible since I want to avoid modifying the component. This component is using calc to calculate it's height so I cannot just use inherit.

Any advice or things I could try?

Answer 1

you can always set the height as percentage if you have set the parent container's height, but if you cant. It might be because of the "vh" unit is not supported. So please check support from caniuse.com and then maybe provide px fallback or set height through JS of its parent.