Looking to find a way to set the height of the content within an <md-tab> element to be 100% in a flexible manner. For example, consider the following structure:
<body>
<md-content>
<md-tabs>
<md-tab label="Tab A">
<div> I want this div to fill the available space. </div>
</md-tab>
<md-tab label="Tab 2">
<div> I want this div to fit its content perfectly. </div>
</md-tab>
</md-tabs>
</md-content>
</body>
The desired effect can currently be achieved with the CSS rule:
md-tab-content#tab-content-0 div[md-tabs-template]{
height: 100%
}
However, this solution is not modular, as adding another tab before "Tab A" would affect the new tab instead. Is there a way to achieve this without creating a new directive and solely through HTML and CSS editing?
UPDATE: Recently discovered that sass can be used, so feel free to implement it if necessary.
Browse the images below to see the desired layout - the red line indicates the active tab and the blue background represents the area occupied by the div within the body of the html:
To further illustrate, check out this codepen created by tweaking an angular material demo: http://codepen.io/ocket8888/pen/YWxGGW. My attempt to use parent selectors proved unsuccessful due to being deprecated in most browsers, hence it's not included.