CODEWITHSUNDEEP
angularjs-material
Doug S.
Doug S.

Reputation: 682

Tab content not flexing correctly

I am testing this in IE 11:

Codepen

I am attempting to have the md-tab-body of my md-tabs control flex to the bottom of the page. I have had to include this css rule to get that somewhat working: 

#tab-content-0 > div, #tab-content-1 > div, #tab-content-2 > div, #tab-content-3 > div {
  height: 100%;
}

If you look at the codepen above, you will see that I get a scroll bar when I do so. What am I doing wrong? I want the tab content to flex to the bottom of the page, the first interior container to just take up however much space it needs and the second interior container to flex to the bottom of the tab content, and if it needs more space, it should have a scrollbar inside.

How do I accomplish this? I think the issue has something to do with the CSS rule above, but I cannot get it to flex at all without it.

Upvotes: 0

Views: 1861

Answers (1)

nextt1
nextt1

Reputation: 3988

Chekc out this pen. I am sure you can do the styling as you did in the other tabs. For this example I just used simple md-tab with label and other simplified elements.

http://codepen.io/next1/pen/qZRpEB

Upvotes: 3

Related Questions