So i managed to fix the error. All i did was setting the hight of my child object and for whatever reason it works. Here are the nessesary snippets i used.

<template>
  <q-page>
    . . .
    <q-scroll-area class="fit">
      <object :data="selectedFile" class="full-width" :height="height" />
    <q-scroll-area>
    <q-resize-obeserver @resize="updateHeights()" />
  </q-page>
</template>

<script>
import { dom } from "quasar";
. . . 
export default {
  name: "PageIndex",
  data() {
    return {
      . . .
      height: 0
    }
  },
  . . . 
  methods: {
    . . .
    updateHeights() {
      this.height = window.innerHeight - dom.offset(this.$el).top;
    }
  },
  mounted() {
    this.updateHeights();
  }
}

I hope this helps everybody who stumbles into a similar issue.

So i managed to fix the error. All i did was setting the hight of my child object and for whatever reason it works. Here are the nessesary snippets i used.

<template>
  <q-page>
    . . .
    <q-scroll-area class="fit">
      <object :data="selectedFile" class="full-width" :height="height" />
    <q-scroll-area>
    <q-resize-obeserver @resize="updateHeights()" />
  </q-page>
</template>

<script>
import { dom } from "quasar";
. . . 
export default {
  name: "PageIndex",
  data() {
    return {
      . . .
      height: 0
    }
  },
  . . . 
  methods: {
    . . .
    updateHeights() {
      this.height = window.innerHeight - dom.offset(this.$el).top;
    }
  },
  mounted() {
    this.updateHeights();
  }
}

I hope this helps everybody who stumbles into a similar issue.

Hey guys, i’m not quite sure if I’m just beeing stupid or if this is a bug.

I tried to make the child of a scroll area fit buy using this code.

<div class="col-6 bg-grey-9 overflow-hidden">
  <q-scroll-area class="fit">
    <object :data="selectedFile" class="fit" />
  </q-scroll-area>
</div>

But it won’t fill the full height. If i take a look into the generated HTML code inside the dev tools i find that the scroll area gets convertet into this.

<div class="col-6 bg-grey-9 overflow-hidden">
   <div class="fit q-scrollarea">
      <div class="scroll relative-position fit hide-scrollbar">
         <div class="absolute full-width">
            <!----><object data="" class="fit"></object>
         </div>
         <!---->
      </div>
      <!---->
      <div aria-hidden="true" class="q-scrollarea__bar q-scrollarea__bar--v absolute-right q-scrollarea__bar--invisible"></div>
      <div aria-hidden="true" class="q-scrollarea__thumb q-scrollarea__thumb--v absolute-right q-scrollarea__thumb--invisible" style="height: 547px; top: 0px;"></div>
   </div>
</div>

The interessting bit is the 4. line. <div class="absolute full-width">
If I change that inside the dev tools to <div class="absolute fit"> than the child fills the full height of the parent object. Since that bit of html code gets automatically generated i’d like to ask how i can change that line to be “fit” instead of “full-width”.

I’m currently working with quasar-extras 1.9.15 and quasar 1.15.1

I hope some of you can help me with that issue.