justify-content: space-between is applying too much end space

Question

I am using the Vuetify flex helper justify-space-between, which is short for justify-content: space-between, but it doesn't seem to be working properly.

It seems to think that there is like a 'ghost element' at the end of the row or something because it adds extra space between the last element and the end, where there should not be any.

codepen here: https://codepen.io/nolsy/pen/qBPKvYZ

screenshot showing extra end space:

I would expect there to be only 2 spaces, and the space at the end should be divided between those two spaces and make them larger. Why is it not doing this?

Thanks in advance!

Answer 1

Refering to this answer.

::before and ::after pseudo elements on a flex container become flex items.

Each in-flow child of a flex container becomes a flex item.

Inside your template there is an :after element being created inside your .v-list-item container, whih adds an extra element to your container.

What you can do is you can manually add a css to clear the after element as below.

.v-list-item:after {
    content: none;
}

This will remove the extra :after element and your code will work as exected.

Working Fiddle

Answer 2

Its due to v-list-item, use v-row insted.

new Vue({
  el: '#app',
  vuetify: new Vuetify(),

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.24.0/axios.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>




 <div id="app">
  <v-app id="inspire">
  <v-app>
      <v-container>
        <v-card elevation="1">
          <v-row class="d-flex justify-space-between">
            <v-btn>
              join
            </v-btn>
            <v-btn>
              join
            </v-btn>
            <v-btn>
              join
            </v-btn>
          </v-row>
        </v-card>
      </v-container>
  </v-app>
</div>
</div>