Search code examples
vue.jsquasar-framework

Quasar - q-scroll-area : Let child fit available space


I have a q-page that contains a q-card that contains a q-scroll-area . There are two possibilities.

  1. The child is smaller than the parent (in horizontal, vertical or both). In this case, I want the child to expand and occupy all available space.
  2. The child is larger than the parent. In this case, I want to let the user scroll the content.

(2) is easily achieved by just keeping the child inside q-scroll-area. But, (1) appears tricky. When I added class="absolute fit" to the child, it occupies the horizontal space but not the vertical space.

I am wondering what should be best way to use q-scroll-area when you want the child to occupy all available space.


Solution

  • I was also looking for the answer and finally I found that when you add both 'col' and 'row' to the class of div element, then it occupy whole space and it is responsive.