Horizontal v-card-title with ellipsis?

Question

I'm using Vuetify 2.5 and trying to create horizontal cards as per the docs, creating a flex-box div to float the title and subtitle to the side of the avatar using d-flex flex-no-wrap.

I want overly long titles to be trunkated with ellipsis, but with the "horizontal mode" the div with the title and the subtitle extends outside the v-card, so the overflow directives don't apply until outside the v-card (or even not at all, since it looks like the title box has grown to accomodate the complete title):

If the d-flex is removed the ellipsing works correctly:

What am I missing about the v-card elements?.

Here's a codepen with the example.

Answer 1

This problem was referenced at Bugzilla and short explanation is here:

Basically: flex items will refuse to shrink below their minimum intrinsic width, unless you explicitly specify "min-width" or "width" or "max-width" on them.

So you can solve your problem by adding min-width: 0 to your second flex column.

There's your modified codepen:

...
<v-card
  :color="color"
  dark
>
  <div>
    <div class="d-flex flex-no-wrap">
      <v-avatar
        class="ma-3"
        size="125"
        tile
      >
        <v-img :src="src"></v-img>
      </v-avatar>
      <div style="min-width: 0">
        <v-card-title class="headline">
          <div class="truncate">{{ title }}</div>
        </v-card-title>
        <v-card-subtitle v-text="artist"></v-card-subtitle>
      </div>
    </div>
</v-card>
...

Works at Chrome 88 and Firefox 86.