Table 在 flex 容器下自适应宽度,导致宽度溢出
.main .content .right{
flex: auto;
min-width: 0;
}
默认情况下,flex选项不会缩小低于他的最小内容尺寸(长单子的长度或固定尺寸元素),改变这个问题可以去设置min-wdith或min-height属性,具体可以参考4.5的flex选项的潜在最小尺寸。
默认最小尺寸是内容尺寸,所以导致溢出,直接设置为0就可以让最小尺寸低于内容尺寸来解决溢出问题。
Tree 虚拟滚动横向滚动条
Tree 数据超大时,需要通过 height 开启虚拟滚动,优化性能。
但这会导致横向滚动失效,某中场景会出现内容显示不全的问题。
官方也明确表示开启虚拟滚动后会导致无法横向滚动,但我们可以通过 css 强制开启横向滚动。
.ant-tree-list-holder {
/* 滚动槽 */
&::-webkit-scrollbar {
width: 8px !important;
height: 8px !important;
}
&::-webkit-scrollbar-track {
background: transparent;
border-radius: 8px;
-webkit-box-shadow: none;
}
/* 滚动条滑块 */
&::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.5);
border-radius: 4px;
-webkit-box-shadow: none;
}
// 开启虚拟滚动时,适配横向滚动
& > div {
overflow: visible !important;
}
}
Reference