.box { // min-height: calc(100vh - 198px); // min-height: 100%; height: 100%; display: flex; overflow-x: hidden; } .left { min-width: 300px; width: 350px; min-height: 100%; border: 1px solid #eee; padding: 10px; // height: calc( 100vh - 198px); // overflow-y: auto; .ant-tree-node-content-wrapper { display: flex; align-items: center; .ant-tree-iconEle { display: flex; align-items: center; } .ant-tree-title { width: 100%; } } .leftTop { display: flex; align-items: center; margin-bottom: 10px; justify-content: space-between; .tRight { display: flex; align-items: center; .icon1 { font-size: 20px; margin-right: 10px; } .icon2 { font-size: 18px; margin-right: 5px; } .icon:hover { cursor: pointer; } } } } .middle { min-width: 500px; width: 100%; border: 1px solid #eee; padding: 10px; margin: 0 0 0 10px; // height: calc(100vh - 180px); height: 100%; overflow-y: scroll; } .title { display: flex; align-items: center; width: 100%; } .titleText { width: 20rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .tip { display: none; } .title:hover { .tip { display: flex; align-items: center; justify-content: flex-end; width: 100%; } } .fs { font-size: 18px; margin-left: 10px; } .rightBox { min-width: 200px; // width: 600px; width: 100%; min-height: 100%; border: 1px solid #eee; padding: 10px; }