How to do this app-layout without media queries?

[Oskar]

Hi, I’m trying to do a (apparently not so) simple app layout. It consists of one container with two cells.

Below 25em the two cells should be in one column. Above 25em they should be side by side. Both cells should fill the size of the container. The last cell should show scrollbars, if necessary.

Since the layout is for a responsive web component I can not use media queries. Here’s what I have so far. The missing piece is enabling overflow when the cells are in one column (below 25em).

https://codepen.io/anon/pen/YQbzer

Been struggling with this… Any help would be greatly appreciated!

[Beverleyh]

Put max-height:50vh; on .overflow?

Also, why not use flex-basis:25em; flex-grow:1; on .container > * instead of what you have there already? i.e. The “Fab Four” calc method, which seems to make more sense in circumstances where no flexbox at all can be used. Why mix them? If you’re using flexbox, why not use it all the way?

[Beverleyh]

Reference for folks curious about “Fab Four” https://medium.freecodecamp.org/the-fab-four-technique-to-create-responsive-emails-without-media-queries-baf11fdfa848

[Oskar]

I should of course have mentioned that users will be able to resize the width and height of .container. So unfortunately I can’t set a fixed height on any children.

Flex-basis+grow works nicely for the layout. Thank you. Just need it to overflow below 25em now..

Updated version: https://codepen.io/anon/pen/eRaRYo

[Beverleyh]

This maybe https://codepen.io/anon/pen/vZwZde

[Oskar]

Thank you! Works great.

[Author]

Posts