[Bug Report] v-calendar wrong height if event-more="false"

[AuspeXeu]

Environment

Vuetify Version: 2.1.11 Vue Version: 2.6.10 Browsers: Firefox 70.0 OS: Windows 10

Steps to reproduce

1. Add several events for the same date
2. Disable the more functionality of the calendar
3. See the day overflowing

Expected Behavior

The day should automatically adjust its height to fit all of its content in case :event-more="false".

Actual Behavior

Events spill into other days and become unclickable.

Reproduction Link

https://codepen.io/auspex/pen/gOONaNR?&editable=true&editors=101

[pumpknhd]

Workaround, add the following CSS:

.v-calendar-weekly { display: table; table-layout: fixed; } .v-calendar-weekly__week { height: auto; display: table-row; } .v-calendar-weekly__day { display: table-cell; width: calc(100% / 7) }

https://codepen.io/pumpknhd/pen/JjYjxRz?editors=0100

[youngmd]

This workaround breaks the day of week labels (places them all in the first column). Add the following CSS to fix those as well:

.v-calendar-weekly__head {
    height: auto;
    display: table-row;
}

.v-calendar-weekly__head-weekday {
    display: table-cell;
    width: calc(100% / 7)
}

[MartinX3]

Sadly the workaround creates another issue

Fixed by using

.v-calendar-weekly {
  display: grid;
  table-layout: fixed;
}

instead of

.v-calendar-weekly {
  display: table;
  table-layout: fixed;
}

[iguilhermeluis]

Fixed by using

.v-calendar-weekly__day {
  overflow-y: auto;
}