UIElements Stretch to fill

I am creating an editor with 2 x panels. 1 x list panel (leftPanel) and 1 x node panel (rightPanel) aligned horizontally.
I want to set the relative sizing as follows:

• mainContainer to stretch and fill the whole editor (width and height)
• leftPanel (child of mainContainer) to have a width of 128px and fill the remaining height in mainContainer.
• rightPanel (child of mainContainer) to stretch and fill remaining width and height in mainContainer
• listView (chiled of leftPanel) to stretch and fill remaining width and height of leftPanel

Code (JavaScript):

1. #mainContainer {
2.         flex-direction: row;
3.         align-self: flex-start;
4.     padding-left: 10px;
5.     padding-top: 10px;
6.     background-color: rgb(128, 128, 128);
7. }
8.  
9. #leftPanel {
10.     flex-direction: column;
11.     min-width: 128px;
12.     background-color: rgb(0, 0, 128);
13. }
14.  
15. #rightPanel {
16.     flex: 1;
17.     background-color: rgb(128, 128, 0);
18. }

I can't seem to get the panels to size properly using flex: 1 0

What am I doing wrong?