html样式排版

<template><div class="box"><div class="header">头部</div><div class="main"><div class="left">菜单</div><div class="right"><div class="right-contentr"><div class="top-pal">上</div><div class="bottom-pal">下</div></div><div class="right-contents">2</div></div></div></div>
</template><script>
export default {}
</script><style lang="less" scoped>
.header {background: #ccc;height: 56px;
}
.main {display: flex;height: calc(100% - 56px);.left {width: 240px;height: 100%;background: #fff;}.right {flex: 1;display: flex;padding: 20px;box-sizing: border-box;.right-contentr {min-width: 200px;margin-right: 20px;width: 320px;.top-pal {background: #fff;min-height: 180px;padding: 25px;margin-bottom: 20px;}.bottom-pal {background: #fff;height: calc(100% - 180px - 20px);overflow: auto;padding: 25px;}}.right-contents {background: #fff;flex: 1;}}
}
</style>