material-editor/src/components/MaterialView.vue

<template>
    <CfFlex class="material-view">
        <div ref="container" style="width: 100%; height: 100%; flex: 3; box-sizing: border-box;" />
        <MaterialAdjuster style="flex: 1;overflow-y: auto; width: 100%; height: 100%; box-sizing: border-box;" />
    </CfFlex>
</template>
<script setup lang="ts">
import { onMounted, useTemplateRef } from 'vue';
import MaterialAdjuster from './MaterialAdjuster.vue';
import { useScene } from '../stores/sceneStore';
import CfFlex from './CfFlex.vue';

const scene = useScene();
const container = useTemplateRef<HTMLElement>('container');

onMounted(() => {
    scene.Initial(container.value);
});

</script>

<style scoped>
.material-view
{
    width: 100%;
    height: 100vh;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
</style>