Scroll area in nested tab

I have met same problem. I use a outer routable tabs . In tab1, i use a normal tab. and it work. but the problem is that in the sub tab , in order to make the content scroll i place the page-content inside the tab div. but it does not has scroll bar. The html of sub tab is:

<div class="navbar">
           <div class="navbar-inner">
            <div class="toolbar tabbar">
                <div class="toolbar-inner">
                   <a href="#tab1" class="tab-link tab-link-active">Tab 1</a>
                   <a href="#tab2" class="tab-link">Tab 2</a>
                   <a href="#tab3" class="tab-link">Tab 3</a>
                </div>
            </div>
           </div>
         </div>

        <div class="tabs tabs-top">
          <div class="tab tab1 tab-active" id="tab1">
               <div class="page-content infinite-scroll-content">
                  <div id="lstRecommand" class="list virtual-list media-list"> 
                  </div> 
                  <div class="preloader infinite-scroll-preloader">
                  </div>
              </div> 
          </div>
          <div class="tab tab2" id="tab2">caocaocao</div>
          <div class="tab tab3" id="tab3">sisisi</div>
        </div>

Use page-content on tab:

<div class="tab tab1 tab-active page-content infinite-scroll-content" id="tab1">

thank you very much. it really solved the problem.