Почему не получается управлять размерами компонента vue

Пытаюсь поместить в родительский div, компонент дочернего div, импорт получается, но размер дочернего div с классом btn игнорируется, что я делаю не так?

Код родительского компонента

import button from './components/button.vue'

</script>

<template>
<div class="container">
  <button/>
</div>
</template>

<style scoped>
.container {
  margin: 0 auto;
  width: 200px;
  height: 200px;
  padding: 0;
  background-color: #4fc77b;
  border-radius: 7px;
}
</style>

код дочернего компонента

</script>

<template>
<div class="btn">Кнопка</div>
</template>

<style scoped>
.btn {
  display: flex;
  width: 50px;
  height: 50px;
}
</style>