Nuxtjs/Vuejs CSS styles are conflicting for 2 components - html

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:
Tried adding <style scoped> to both my Create.vue & Design.vue then also styles in Design.vue is getting messed up.
Tried adding overflow:hidden; to my Create.vue but that's not working either.
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>