[Bug Report] Paginations are still breaking out of their parent component

[ChrisLandowski]

Environment

Vuetify Version: 2.0.2
Vue Version: 2.6.10
Browsers: Safari 12.1.1
OS: Mac OS 10.14.5

Steps to reproduce

Open the codepen.

Expected Behavior

The entire pagination component should fit within the parent card component.

Actual Behavior

Both the prior and next buttons are extending outside the parent card component.

Reproduction Link

https://codepen.io/anon/pen/PMNzLj?&editable=true&editors=101

Other comments

Changing the width of the card to 500 works while 600 does not.
The v2.0.2 changes made for #7947 didn't completely fix the previously reported bug..

[chouhanyang]

Hi, I'm new to this, but I'm hitting the opposite of this problem. I think previous fix assume the width of the containing element is known, so we can calculate maxButtons. However, it may not always be the case. For example, I'm putting pagination control to the top right inline with other controls. Now, with pagination set to width 100% by default, which takes entire line. I have to wrap it with a div, which calculate its size from pagination control. And this cause the "..." shows up.

<v-card-title>
  <v-text-field
    ...
  ></v-text-field>
  <v-btn
    ...
  >
    <v-icon>add</v-icon>
  </v-btn>
  <v-btn
    ...
  >
    <v-icon>delete_outline</v-icon>
  </v-btn>
  <v-spacer></v-spacer>
  <div>
    <v-pagination ></v-pagination>
  </div>
</v-card-title>

with the extra div around pagination, it will become

I only have 3 pages, very weird. And then, it will become correct next rendering (click a button).

Just FYI. My current workaround is to force remove width 100% style on pagination.

Reproduction Link

https://codepen.io/chouhanyang/pen/PMpbQj

[psheth1811]

The given solution is not fixing the issue. I am still able to reproduce it.

[ChrisLandowski]

A workaround to this problem is to use the total-visible property. I am using :total-visible="($vuetify.breakpoint.width - $vuetify.application.left - 104) / 44 - 1" on a fluid v-container without any problems.

[fnaysee]

@ChrisLandowski Thank you. Your solution worked for me with few modification.
I used it like below inside a v-card:
:total-visible="($vuetify.breakpoint.width - $vuetify.application.left - 304) / 44 - 1"