Why does "flex column justify-between" not work on my QCardSection?

[BenJackGill]

I have a page with three QCards. Each card has some QCardSection's within.

And one of those cards has some QLinearProgress bars. It looks like this:

And now I am trying to space out those progress bars vertically using flex column justify-between on the QCardSection.

But that is having no effect. Nothing changes. They are not spaced out at all.

To solve this problem I tried also adding fit like so fit flex column justify-between. And that spaced them out, but now the progress bars go way beyond the QCard itself, and they are hidden behind another QCard below. See here:

This behavior is very confusing. Any help would be very much appreciated.

How do I use flex to space them out vertically within the card?

Here is a working reproduction showing the most important parts: https://stackblitz.com/edit/quasarframework-mtabwv?file=src/components/AuditSummaryCard.vue

[suleimanas]

https://stackblitz.com/edit/quasarframework-qxmulm?file=src/components/AuditSummaryCard.vue

2 changes:

1. <q-card flat bordered class="fit column">
2. <q-card-section class="col column justify-between">

[BenJackGill]

Thanks! This works, but I'm not sure why...

I understand the need to put column on the QCard. Because that would stack everything vertically.

But why does the QCardSection need col to make the inner parts of that card obey they flex rules? I don't get that part.

[suleimanas]

about .col https://quasar.dev/layout/grid/column#all-breakpoints
happy to help :)