#新人报道# vue3+element plus + windiCSS 页面渲染宽度与设计不符
使用npm create vue@latest创建vue3项目后，想要设置左右两个盒子各占视口宽度的一半，在HTML文件中测试没有问题，但是在vue组件中出现的效果总是右侧有一列空白区域，请问各位大佬是否有遇到过此类问题，还望不吝赐教
<template>
<div class="container">
<div class="container-left">1</div>
<div class="container-right">2</div>
</div>
</template>
<script setup lang='ts'>
</script>
<style>
/* 1. 重置全局样式（包括 html/body，需解除 scoped 限制） */
:global(*),
:global(html),
:global(body) {
margin: 0;
padding: 0;
/* 关键：让盒模型包含边框/内边距，避免宽度溢出 */
box-sizing: border-box;
}
/* 2. 修复容器宽度计算偏差 */
.container {
/* 替换 100vw 为 100%，避免滚动条占用视口宽度导致计算错误 */
width: 100%;
/* 强制占满屏幕高度 */
height: 100vh;
display: flex;
/* 禁止容器收缩，确保子元素占满 */
flex-shrink: 0;
}
.container-left {
/* 用 flex: 1 替代 50vw，自动平分宽度（更稳定） */
flex: 1;
height: 100%;
background-color: rgb(125, 248, 248);
}
.container-right {
/* 用 flex: 1 替代 50vw，自动平分宽度 */
flex: 1;
height: 100%;
background-color: rgb(248, 205, 125);
}
</style>
