It's a bit difficult for me to explain my problem, so much better to just show an example (check the JSFiddle):

```
#contacts {
position: fixed;
bottom: 0;
width: 100%;
max-height: 75%;
}
#contacts .tab-content {
height: 100%;
overflow: scroll;
}

```

[JSFiddle no scroll](http://jsfiddle.net/1shn0xad/1/)

As you see, there's a tab fixed on the bottom which toggles a panel (I'm using Bootstrap 3). The content of the panel is dynamically generated, so I need the panel to increase its height as the content is generated, up to a 75% of the page's height (not to cover it all).
Now, when the content is too much, I need an inner scrollbar; as you can see, the scrollbar is there, but it's not working, because the #contacts div has no specific height, so the .tab-content's "height: 100%" is not working.
If I try using "overflow: scroll" on #contacts instead of .tab-content, it works:

[JSFiddle scrolls label too](http://jsfiddle.net/xpfw25z3/)

But the problem, now, is that the scrollbar also scrolls the tab label, and that it's outside of the .tab-content, so when I click on it the div loses focus and the tab closes.
Any idea how to solve this? Thanks!