Cannot shrink div width (Vuetify, Nuxt)

Question

I am creating a formulary and some fields are intended to occupy just 50% of the size that a normal field would take.

It is a dynamic formulary so i use a v-for that take a form object from vuex and use its data to summon the correct component on screen.

I em using because i have TextField's, DateField's, CheckField's and all this configuration is made in the forms object.

Now, to the code:

At store/module/forms.js (vuex) (it is a list of objects like this one):

[
  {
    name: 'familiarIncome',
    type: 'TextField',
    value: '',
    options: {
      dataname: 'familiarIncome',
      mandatory: true,
      label: 'Renda familiar',
      placeholder: '',
      rules: fieldRules.float('a renda familiar'),
      css: 'width: 50%', // Attention here. This will be injected into component
    },
  }
]

Then, at pages/formulario.js: (note that until now i wrote only 3 input components)

<template>
  <v-app class="container d-flex justify-center">
    <h1>Coleta de dados</h1>
    <v-form class="container fluid">
      <h2>Dados pessoais</h2>
      <div class="personal-data d-flex flex-wrap">
        <div
          v-for="field in getForm.personalData"
          :key="field.name"
          class="field"
          <!-- Pay attention to this class up here (field) -->
        >
          <component
            :is="field.type"
            <!-- Here is where all those options -including "width: 50%" are being injected -->
            v-bind="field.options" 
            @change="updateData((section = 'personalData'), $event)"
          ></component>
        </div>
      </div>

      <div class="social-benefits"></div>
      <div class="is-disabled"></div>
      <div class="address"></div>
      <div class="child-already-born"></div>
    </v-form>
  </v-app>
</template>

<script>
import { mapGetters } from 'vuex'
import TextField from '../components/inputs/textfield.vue'
import ConfirmButton from '../components/inputs/confirmbutton.vue'
import SelectField from '../components/inputs/selectfield.vue'

export default {
  name: 'Formulario',
  components: { TextField, ConfirmButton, SelectField },
  data() {
    return {
      formToken: this.$route.params.token,
    }
  },
  computed: {
    ...mapGetters(['getForm']),
  },
  methods: {
    updateData(section, eventData) {
      const data = {
        section,
        ...eventData,
      }
      this.$store.commit('setFormField', data)
      console.log(this.$store.state)
    },
  },
}
</script>

<style scoped>
.field {
  padding: 7px;
  width: 50%;
}

h1 {
  font-size: 36px;
}

h2 {
  font-size: 24px;
}
</style>

And now a print of the web page:

If i missed any important info, please let me know ;)

(just for the case where someone complains, i searched A LOT before asking here ;) )

Answer 1

Ok so i figured it out some minutes later by trying to do things that would look wrong (great technique by the way)

What i did was taking out the wrapping div arount the <component> tag, so then the 50% width would really take the right effect.