How would you create a layout to fit content without a scroll which would have consistent look across different screen sizes?

Hi guys,

I’m trying to create a layout where all the elements should be squeezed on the screen without scroll. It’s not much of a pain for iOS devices since there aren’t that many various screen sizes to take into account. For android, however, it’s a real nightmare. I have seen a few poorly designed apps which either have all visible elements squashed on the top of the screen with ugly blank space underneath or, what’s even worse, don’t fit in the screen at all and overflow without a scroll.

I tried to use percent-based layouts and plugins like fittext to ensure that text doesn’t overflow, but this doesn’t seem right (using JS for layout-related tasks) and rarely achieves a desired effect (fittext doesn’t always scale as expected).

How would you approach this problem?

flexbox is your best friend here