How to solve split layout using flexbox?


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?


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.

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