左边大小明确,右边自适应:
左边必须设置max-width,右边flex:1自适应剩余空间。
.container {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: row;
.left {
max-width: 180px;
background-color: #001529;
}
.right {
flex: 1;
background-color: #2074c3;
}
}
上边大小明确,下边自适应:
上边必须设置max-height,下边flex:1自适应剩余空间。
.container {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
.top{
max-height: 50px;
background-color: #001529;
}
.bottom{
flex: 1;
background-color: #2074c3;
}
}