.replies { display: flex; flex-direction: column; box-sizing: border-box; width: 400Px; overflow-y: auto; border-radius: 2Px 0 0 2Px; position: absolute; right: 0; height: calc(100% - 54Px); z-index: 2; top: 54Px; background: #ffffff; box-shadow: 0 1Px 10Px 0 rgb(2 16 43 / 15%); .header { display: flex; flex-direction: row; align-items: center; height: 30Px; padding: 10Px 0; &-title { width: calc(100% - 40Px); text-align: left; height: 30Px; font-family: PingFangSC-Medium; font-weight: 500; font-size: 16Px; color: #333333; line-height: 30Px; } &-close { width: 20Px; i { width: 12Px; height: 12Px; } } &-back { width: 20Px; } } .body { padding: 10Px 0; width: 100%; flex: 1 1 auto; display: flex; flex-direction: column; overflow: hidden; .body-message { border-bottom: 1Px dashed #e0e0e0; } .body-list { width: 100%; flex: 1 1 auto; overflow-y: auto; &-item { display: flex; flex: 1 1 auto; flex-direction: row; flex-wrap: nowrap; align-items: center; .replies-item { flex: 1; } .avatar { width: 36Px; height: 36Px; margin: 10Px 10Px 10Px 0Px; border-radius: 10%; } .name { width: calc(100% - 60Px); height: 20Px; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 20Px; font-family: PingFangSC-Regular; font-weight: 400; font-size: 14Px; color: #000000; letter-spacing: 0; } } .more { text-align: center; color: rgba(0, 0, 0, 0.3); font-size: 12Px; padding: 10Px; } } } } ::-webkit-scrollbar { width: 4Px; height: 140Px; background-color: transparent; } ::-webkit-scrollbar-track { border-radius: 10Px; } ::-webkit-scrollbar-thumb { border-radius: 10Px; background-color: #d8d8d8; }