You don't NEED flex-box CSS as any part of the solution I showed -
just pointing out that it's a good starting-point if you ARE using
flex-box to layout viewport-height sized layouts.
However, I see now this is not a viewport-height layout, it is a
normal layout that overflows the viewport, and you want to size things
in terms of viewport height nonetheless. Which is the right use-case
for vh.
You'll either have to use some JS or re-think your layout in
terms of width rather than height. For images, that should work just
as well. Size the width in % and height:auto.
Where vh
would really come in handy is for sizing e.g. banners, which you
might want in some proportion to the viewport height, in order to
keep sensible proportions from the user's viewpoint.
FWIW, flex-box CSS has
much older browser support than vh! IF you are willing
to use multiple syntaxes. (And afraid it is more than just browser prefixes.)