Variable mode does not work with single row

[antran-mwb]

trafficstars

Describe the bug

I am currently using DynamicScroller and DynamicScrollerItem and they work flawless when I style the DynamicSCrollerItem with CSS. However, if the scroller item has a css class to make the item span the entire row it breaks:

// xs12 uses this css class
    flex-basis: 100%;
    flex-grow: 0;
    max-width: 100%;

Using 50% to get two columns or even 33% for 3 columns works fine too. For some reason variable mode does not like it when we have the item span the entire row

  flex-basis: 50% // works with 33%
  flex-grow: 0
  max-width: 50% // works with 33%

Reproduction

<DynamicScroller
        :items="items"
        :min-item-size="81"
        key-field="groupName"
        class="scroller"
      >
        <template v-slot="{ item: group, index: groupNdx, active }">
          <DynamicScrollerItem
            :item="group"
            :active="active"
            :data-index="groupNdx"
          >
            <div>
              <div class="TableGroup mt-3 mb-2">
                <!-- Group name   -->
                {{ group.groupName }}
              </div>
              <v-layout
                justify-space-between
                row
                wrap
              >
                <!-- DynamicScrollerItem seems to break if we try to put items in single row like with xs12  -->
                <v-flex
                  v-for="(item, index) in group.items"
                  :key="index"
                  class="TableItem"
                  xs12 // THIS IS THE CULPRIT HERE. It renders the item to span the entire row. Changing this to xs6 which renders into two columns will work without change to anything else. 
                  sm6
                  xl4
                >
                  <slot :item="item">
                    <label
                      class="CustomCheckbox"
                      :title="getItemLabel(item)"
                    >
                      <input
                        v-model="checkboxStates[item[itemValue]]"
                        type="checkbox"
                        @change="onSelectItem(item, index)"
                      >
                      <div class="text-ellipsis">
                        {{ getItemLabel(item) }}
                      </div>
                    </label>
                  </slot>
                </v-flex>
              </v-layout>
            </div>
          </DynamicScrollerItem>
        </template>
      </DynamicScroller>

System Info

System:
    OS: macOS 13.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 1.98 GB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 14.18.0 - ~/.nvm/versions/node/v14.18.0/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v14.18.0/bin/yarn
    npm: 6.14.15 - ~/.nvm/versions/node/v14.18.0/bin/npm
  Browsers:
    Brave Browser: 109.1.47.171
    Firefox: 109.0
    Safari: 16.2

Used Package Manager

npm

Validations

• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• [X] The provided reproduction is a minimal reproducible example of the bug.