Q-tabs overflow-y dynamic height

[kyriediculous]

Hi

So I’ve been building my app with quasar for a while now and stumbled across something which I just can’t figure out.

I have a tabs component with tab panes. The viewheight is supposed to be one pagefold. If the area with the text (see picture) overflows the 100vh it’s supposed to scroll.
It shows the scrollbar (see arrows) but doesn’t cut off.

The tabs components seems to ignore the container height of 100vh-50px set by the q-page component.

Any help? Many thanks!

This is what I’m trying to achieve within my scope : https://codepen.io/stephenbunch/pen/KWBNVo

Stripped code:

<template lang="html">
  <q-page v-if="bounty" :style-fn="fixPageHeight" class=" white-text">
      <div class="col-auto wrap q-px-xl">
        ...
        </div>
      <div class="col-auto q-px-xl bounty-subheader">
        ...
      </div>
        <q-tabs class="col-auto" animated swipeable color="gradient2" align="justify">
           <q-tab default name="info" slot="title" icon="fas fa-info-circle" label="Info" />
           <q-tab name="commits" slot="title" icon="fas fa-lightbulb" label="Commits" />
           <q-tab disabled name="comments" slot="title" icon="fas fa-comment" label="Comments" />
           <q-tab-pane class="column" name="info">
             <div class="row">
               <div class="col-lg-9 scroll-area">
                 <div class="bounty-inf items-start row">
                   <div class="col-lg-4 column">
                     ...
                   </div>
                   <div class="col-lg-8 column">
                       <strong v-if="bounty.attachments.length>0" class="attachments-title">Attachments</strong><br />
                     <div class="attachments">
                       ...
                     </div>
                   </div>
                 </div>
                 <div class="row blog-summary">
                   <div class="col-auto"v-html="bounty.description"></div>
                 </div>
               </div>
               <div class="col-lg-3 column bounty-activity">
                 <strong>Activity</strong><br />
                  ...
               </div>
             </div>
           </q-tab-pane>
           <q-tab-pane class="row col-auto " name="commits">
             <div class="flex commits row">
               <div class="col-lg-9 q-px-xl">
                 <q-list v-if="bounty.proposals.length>0" highlight inset-separator no-border>
                  ...
                 </q-list>
               </div>
               <div class="col-lg-3 bounty-activity">
                 <strong>Activity</strong><br />
                 ...
               </div>
             </div>
             </div>
           </q-tab-pane>
           <q-tab-pane class="row col-auto " hidden disabled name="comments"></q-tab-pane>
         </q-tabs>
  </q-page>
</template>