vue2，css，有关header内容和父盒子div不等长的问题及解决方法

问题描述，div父盒子的宽度设置与浏览器的宽度一致（width:100vw），里面嵌套着el-header子组件，即使这个子组件也设置跟浏览器一样的长度，但是渲染的画面还是子组件的内容多长就占居多少，子组件里面的登录按钮设置了悬浮于浏览器的最右边（没有效果，因为子组件的内容就这么长）

解决方案：

在div组件上的样式设置：

width: 600px;//最主要，将这个div盒子撑大

display: flex;

align-content: center;

align-items: center;

position: relative;//主要设置

按钮组件的样式设置：

float: right;

position: absolute;//绝对定位

right:0px;