Using flexbox layout with angular-ui tabs

Question

I wan't to use flexbox layout with angular ui tabs (ui.bootstrap.tabs). I have this plunker:

http://plnkr.co/edit/9ToL1WLwgDVT0DldMnaa

I changed the ui-template thus all div's get the flexbox classes. Still the tab content div is not filling up the fully available space.

Any idea?

Answer 1

I have found a solution. Here is an updated plunker:

http://plnkr.co/edit/oswSGYApFj9sSohms0FS?p=preview

The key is to override the display property of the '.tab-content>.active' class. By default it is set to 'display: block'. It has to be set to 'display: flex'.