帮我写一个页面布局，页面的最左边是一个el-menu菜单，页面的右边有一个位于剩余页面居中，宽度占据整个页面40%的白色背景box，请给出代码示例

可以使用flex布局实现该页面布局，以下是示例代码：

HTML部分：

<div class="container">
  <div class="menu">
    <el-menu>
      <!-- 菜单项 -->
    </el-menu>
  </div>
  <div class="content">
    <!-- 内容区域 -->
    <div class="box"></div>
  </div>
</div>

CSS部分：

.container {
  display: flex;
  height: 100vh; /* 高度设置为100% */
}
.menu {
  width: 20%; /* 左侧菜单宽度为20% */
}
.content {
  flex: 1; /* 右侧内容区域占据剩余空间 */
  display: flex;
  justify-content: center; /* 内容区域居中 */
  align-items: center;
}
.box {
  width: 40%; /* box宽度为整个页面的40% */
  height: 500px; /* 高度自定义 */
  background-color: white;
}