how to display items as flex items inside a div Vuetify calendar events

Question

I'm using Vuetify 2 calendar for displaying the monthly events

https://v2.vuetifyjs.com/en/components/calendars/

https://codepen.io/pen?&editors=101

After tweaking the css & html, this is how it is rendered in the DOM

<div role="cell" class="v-calendar-weekly__day v-past">
<div class="v-calendar-weekly__day-label">
  <button type="button"
        class="v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light v-size--small transparent"><span
            class="v-btn__content">7</span></button></div>

<div class="v-event v-event-start v-event-end white--text"
    style="height: 20px; width: 95%; margin-bottom: 1px; background-color: rgb(35, 102, 204); border-color: rgb(35, 102, 204); display: none;">
    <div class="pl-1"><span class="v-event-summary">My first event 8</span></div>
</div>
<div class="v-event v-event-start v-event-end white--text"
    style="height: 20px; width: 95%; margin-bottom: 1px; background-color: rgb(35, 102, 204); border-color: rgb(35, 102, 204); display: none;">
    <div class="pl-1"><span class="v-event-summary">My Second event 8</span></div>
</div>
<div class="v-event v-event-start v-event-end white--text"
    style="height: 20px; width: 95%; margin-bottom: 1px; background-color: rgb(35, 102, 204); border-color: rgb(35, 102, 204); display: none;">
    <div class="pl-1"><span class="v-event-summary">My first event 13</span></div>
</div>
<div class="v-event v-event-start v-event-end white--text"
    style="height: 20px; width: 95%; margin-bottom: 1px; background-color: rgb(35, 102, 204); border-color: rgb(35, 102, 204); display: none;">
    <div class="pl-1"><span class="v-event-summary">My Second event 13</span></div>
</div>
<div class="v-event v-event-start v-event-end white--text"
    style="height: 20px; width: 95%; margin-bottom: 1px; background-color: rgb(35, 102, 204); border-color: rgb(35, 102, 204); display: none;">
    <div class="pl-1"><span class="v-event-summary">My first event 27</span></div>
</div>
<div class="v-event v-event-start v-event-end white--text"
    style="height: 20px; width: 95%; margin-bottom: 1px; background-color: rgb(35, 102, 204); border-color: rgb(35, 102, 204); display: none;">
    <div class="pl-1"><span class="v-event-summary">My Second event 27</span></div>
</div>
<div data-more="1" class="v-event-more pl-1" style="height: 20px; margin-bottom: 1px;">6 more
</div>

This is how it is looking alike in the browser

This is what is expected

Expectations:

If there are 2 events, take 90% of the available width & render them one by one. However when the events are more than 2 than take the width 50% of the available width & render side by side (display:flex)

However, I cannot use display:flex on the parent, when doing so it affects the date text which is not desired.

In simpler words, I want div.v-event inside v-calendar-weekly__day to render as flex items when the number of div is more than 2, otherwise render one after the other in line.

Please suggest. Thanks!