javascript - Display Flex Property is not Taken On Vue Scoped scss , Why?

Question

hi i have following code with vue formulate form

  <template>
  <div class="repeatable-container">
    <FormulateForm>
      <FormulateInput type="text" label="strength" placeholder="strength" />
      <FormulateInput type="select" label="Quantity" placeholder="strength" />
      <FormulateInput
        type="select"
        label="Method of intake"
        placeholder="strength"
      />
      <span>Remove Dossage</span>
    </FormulateForm>
  </div>
</template>

<script>
export default {
  name: "RepeatableGroup",
};
</script>

//When scoped on style flex property of .formulate-input-wrapper is not taking but it takes if i remove it ,Can any body got idea? 
<style lang="scss" scoped >
.repeatable-container {
  .formulate-form,
  .formulate-input-wrapper {
    display: flex !important;
  }
}
.formulate-input-wrapper {
  display: flex !important;
}
</style>

here is the image

with scoped attribute on style

without the scoped attribute on style flex property is accessible

question from:https://stackoverflow.com/questions/65860604/display-flex-property-is-not-taken-on-vue-scoped-scss-why

Answer 1

That's because with scoped , the parent component's styles do not leak into child components.