Inconsistent behaviour in element height, when using column with row due to whitespace, e.g. when writing "Lorem ipsum" instead of "Loremipsum".

[klauskades]

What happened?

Using column in combination with row and col-6. The height of the col-6 element is different, depending on the usage of whitespaces in the text. Problem becomes worse, when having multiple lines.

<div id="q-app">
  <div class="column">
    <div class="row">
      <div class="col-6 bg-blue">
        <div>
           <!-- With "Lorem ipsum" one line extra space is added at the bottom. With "Loremipsum" no extra space is added -->
          Lorem ipsum
        </div>
      </div>
    </div>
  </div>
</div>

I am happy about any solution!

What did you expect to happen?

I would expect the col-6 element to have always the same height - only one line.

Reproduction URL

https://codepen.io/Klaus-Kades/pen/pvgdNMx

How to reproduce?

1. Go to the provided Codepen
2. Switch between 'Loremipsum' or 'Lorem ipsum'
3. Add v-for="x in 30" :key="x" to the Lorem ipsum div to make it more obvious.

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Components (quasar)

Platforms/Browsers

No response

Quasar info output

Operating System        Darwin(25.0.0) - darwin/arm64
NodeJs                  23.9.0

Global packages    
  NPM                   10.9.2
  yarn                  Not installed
  pnpm                  9.13.0
  bun                   Not installed
  @quasar/cli           2.5.0
  @quasar/icongenie     4.0.0
  cordova               Not installed

Networking         
  Host                  localhost

Relevant log output

Additional context

I use column in combination with col a lot to use the full size of the screen. On one of our pages, this issue is leading to unnecessary vertical scrolling, because multiple lines like this, sometimes add even more unnecessary vertical space to the element. You can test this with:

    <div v-for="x in 30" :key="x">
       <!-- With "Lorem ipsum" one line extra space is added at the bottom. With "Loremipsum" no extra space is added -->
      Lorem ipsum
    </div>