traxxx/assets/components/container/container.vue

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

        <div class="content">
            <!-- key forces rerender when new and old path use same component -->
            <router-view :key="$route.fullPath" />
        </div>
    </div>
</template>

<script>
import Header from '../header/header.vue';

export default {
    components: {
        Header,
    },
};
</script>

<style lang="scss">
@import 'theme';

.container {
    background: $background-dim;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow-y: auto;
}

.content-inner {
    flex-grow: 1;
    padding: 1rem;
    overflow-y: auto;
}
</style>