DataPage.vue

<script setup>
const props = defineProps(['stretch'])
</script>

<template>
  <div class="data-page shadow" :class="{ 'data-page__stretch': props.stretch }">
    <slot />
  </div>
</template>

<style scoped>
.data-page {
  overflow: hidden;
  background-color: hsl(var(--clr-content));
  width: 100%;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
}

.data-page__stretch {
  flex: 1;
}
</style>