table组件设置flex-height的情况下，Column设置拖拽列宽表现不一致

[FlyingRadish]

TuSimple/naive-ui version (版本)

2.34.4

Vue version (Vue 版本)

3.3.4

Browser and its version (浏览器及其版本)

Chrome

System and its version (系统及其版本)

MacOS

Node version (Node 版本)

Reappearance link (重现链接)

https://www.naiveui.com/zh-CN/os-theme/components/data-table#DataTable-Props

Reappearance steps (重现步骤)

1. 设置flex-height固定表格高度
2. 对column设置resizable=true，以实现自由调整列宽

Expected results (期望的结果)

设置flex-height，并设置column的resizable=true，拖拽调整宽度，滚动条根据实际情况出现。和没有设置flex-height的表现一致

Actual results (实际的结果)

仅设置flex-height时，可以拖拽调整列宽，但是底部不会出现横向滚动条(按住鼠标右移做选中操作可以强行滚动)，导致用户看不到溢出的内容 设置flex-height，并设置scroll-x，可以出现滚动条，如此该如何计算scroll-x的值？按最大值计算显然右侧会多出大段空白并不美观。

Remarks (补充说明)

[FlyingRadish]

尝试设置scrollbar-props的xScrollable为true，也无法实现

[jizai1125]

scroll-x 是在有固定列的时候才需要设置

[FlyingRadish]

@jizai1125 那么如何实现这个效果呢？

设置flex-height，并设置column的resizable=true，拖拽调整宽度，滚动条根据实际情况出现。和没有设置flex-height的表现一致

[jizai1125]

没太明白你的问题，flex-height 跟 resizable 有什么关系呢，你能给个复现么

[FlyingRadish]

@jizai1125

这是一个简单的复现链接codesandbox

• 删掉flex-height后，拖拽length宽度，表格底部会出现横向滚动条
• 加上flex-height后，拖拽length宽度，不会出现横向滚动条，但通过touchpad可以横向滚动

我们的使用场景下，表格尺寸需要被严格控制，所需要flex-height，但是在表格宽度超长的情况下不会出现横向滚动条，这就很蛋疼

[ivanmem]

Same problem. I use flex-height and horizontal scrolling does not appear. Attempts to install scroll-x | scrollbar-props | style did not lead to anything.

[realByg]

设置flex-height，并设置scroll-x，可以出现滚动条，如此该如何计算scroll-x的值？

你既然设置了 resizable， scroll-x 肯定就不能是一个固定值，尝试一下 min-content

[realByg]

Same problem. I use flex-height and horizontal scrolling does not appear. Attempts to install scroll-x | scrollbar-props | style did not lead to anything.

try setting scroll-x to min-content, worked for me

edit: one small problem with this though. The fixed columns won't show box shadow

[ivanmem]

realByg, this really works, thanks!

[LoveCodingOnGithub]

@realByg works for me , thanks !