Nuxtjs/Vuejs CSS styles are conflicting for 2 components

Question

I have 2 different components in my Vuejs/Nuxtjs application: pages/Create.vue and pages/Design.vue. I have the stylesheet assets/css/styles.css.

Within the stylesheet styles.css I have a style: overflow:hidden;. This style sheet has been added only to my Design.vue component and not to my Create.vue component. However, I see that this style is impacting my Create.vue without even including it.

If I modify to overflow:auto; then everything works perfectly in Create.vue but Design.vue gets messed up.

I tried following things but still had no luck in making both components work perfectly:

1. Tried adding <style scoped> to both my Create.vue & Design.vue then also styles in Design.vue is getting messed up.

2. Tried adding overflow:hidden; to my Create.vue but that's not working either.

3. Tried adding scoped to both components then also its not working perfectly for me.

Following is the code I have from both components: styles.css

html,
body {
  overflow: hidden;
}

Create.vue:

<template>
  <div>
      <!-- My code with overflowing the page-->
  </div>
</template>

<script>
export default {

}
</script>

<style>

/* OTHER STYLES */
</style>

Design.vue:

<template>
  <div>
      <!-- My code with overflowing the page-->
  </div>
</template>

<script>
export default {

}
</script>

<style>
@import "~/assets/css/styles.css";

/* OTHER STYLES */
</style>