flex布局一屏展示

1.html

2.less
@deep: ~‘>>>’;
.error-protected{
width: 100%;
// height: calc(~‘100% - 34px’);
position: relative;
display: flex;
flex-direction: column;
flex-grow: 1;
flex-shrink: 1;
overflow: auto;
.option-container {
margin-bottom: 15px;
}
.table-container {
width: 100%;
// height: calc(~‘100% - 75px’);
flex-grow: 1;
display: flex;
flex-direction: row;
flex-shrink: 1;
overflow: auto;
.table-wrap{
width: 100%;
.table-box {
width: 100%;
height: calc(~‘100% - 50px’);
flex-grow: 1;
flex-shrink: 1;
overflow: auto;
.ivu-table-wrapper {
box-sizing: border-box;
}
}
.page-container {
width: 100%;
height: 35px;
margin-top: 15px;
padding-right: 20px;
text-align: right;
.delete-operation-container {
float: left;
}
}
}
}
}
@{deep}.ivu-table th {
border-top: 1px solid @border_color;
border-right: 1px solid @border_color;
}
@{deep}.ut-condition-container{
border-bottom: none;
}