How to solve split layout using flexbox?

ionic-v1
1

Hi

I have been struggling to figure out how to use flexbox with ionic, my layout i want to use is “frame based” and I’m not sure how to go about (read i suck at html) in getting it the way i want.
Is the layout below possible with flexbox inside ionic? I gave it a try but the in box1 took the entire width, sorry i haven’t got anything to show you on code pen.

Can it be done?

Cheers,

2

Some progress, i cannot seem to get the div.receipt to fill 100% of the width, and when i add more, it grows downwards and pushes the div.totals (black section) out of the view.

3

Flexbox can be quite tricky, thankfully there are some cool tools out there to help

http://the-echoplex.net/flexyboxes/