Неожиданное поведение flexbox, выравнивание всех элементов по левому краю

Question

Я следовал онлайн-уроку по созданию маленькой игры на Vue. У меня возникли некоторые неожиданные проблемы с Flexbox.

У меня все элементы выровнены по центру экрана, и мне нужно было изменить размер div, используя

   .details {
      flex: 1 1 100%;
    }

для убедитесь, что все согласовано.

Вот CSS с тегом стиля и шаблоном, который я использую.

<template>
  <div class="upgrades">
    <div v-for="(upgrade, index) in upgrades" :key="index" class="upgrade">
      <button
        @click="()=>{
        buyUpgrade(index)
        }"
        :class="`button ${upgrade.disabled ? 'disabled' : ''} `"
      >{{ upgrade.name }} {{ upgrade.disabled ? `(lvl: ${upgrade.unlocksAt})` : ''}}</button>

      <div class="details">
        <div class="cost">Cost: {{ upgrade.cost }}</div>
        <div class="quantity">Quantity: {{ upgrade.quantity }}</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.upgrades {
  background-color: #222;
  padding: 25px;

  .upgrade {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0px -15px 15px;

    .button,
    .cost,
    .quantity {
      color: #fff;
      margin: 0 15px;
    }

    .details {
      flex: 1 1 100%;
    }

    .button {
      appearance: none;
      border: none;
      outline: none;
      background: none;

      display: inline-block;
      min-width: 295px;
      padding: 15px 25px;
      background-color: #28a484;

      color: #fff;
      font-size: 19px;
      font-weight: 695;
      text-align: center;
      text-transform: uppercase;

      cursor: pointer;

      &.disabled {
        color: #222;
        background-color: #ccc;
        pointer-events: none;
      }
    }
  }
}
</style>

Что сбивает с толку, так это то, что при добавлении flex: 1 1 100% Div "Upgrades" перемещается в левую часть экрана, добавление некоторых дополнительных выравниваний также не устранило проблему.

Что вызывает перемещение элемента Upgrades влево, а не просто изменение размера и центрирование?