title: Dealing with height of Angular component inside a flex container
body: <p>I'd like to create a simple tabview component with the following requirements:</p>
  
  <ul>
  <li>It should take 100% of its parent container's height</li>
  <li>Each panel/tab has a header with a button to collapse/expand it and a content, which holds a treeview component, and should take all the remaining space of the panel </li>
  <li>If I collapse a panel, the expanded ones should grow proportionally</li>
  </ul>
  
  <p>I've prepared an example on Stackblitz: </p>
  
  <p><a href="https://stackblitz.com/edit/angular-4pgdbj?embed=1&amp;file=src/app/app.component.html" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-4pgdbj?embed=1&amp;file=src/app/app.component.html</a></p>
  
  <p>The problem I'm having is that the treeview components that are inside the panels doesn't take all the height, because the parent is a flex div. I'm pretty new to flex CSS rules, and I'd like to know if there's a way to force the height to 100% in this case.</p>
  
  <p>Thanks!</p>