如何在无需向下滚动的情况下显示react-split第一个面板的水平滚动条

我来帮你搞定这个问题！你当前的问题根源在于第一个面板的容器没有明确的高度约束，导致水平滚动条被挤压到了内容的最底部，必须向下滚动才能看到。咱们通过几个简单的样式调整就能让两个滚动条同时显示：

步骤1：给Market组件的容器设置高度和滚动属性 #

修改Market组件的外层chakra.div，添加height="100%"确保它占满Split分配的垂直空间，同时保留overflow="auto"让容器在内容超出时自动显示滚动条：

const Market = (props) => {
  return (
    <chakra.div {...props} height="100%" overflow="auto">
      <Tabs isLazy>
        <TabList>
          <Tab>Acções</Tab>
          <Tab>PSI 20</Tab>
        </TabList>
        <TabPanels>
          <TabPanel padding={0}>
            <MarketTable />
          </TabPanel>
          <TabPanel padding={0}>
            <p>Empty</p>
          </TabPanel>
        </TabPanels>
      </Tabs>
    </chakra.div>
  );
};

步骤2：确保表格容器适应外层宽度 #

调整MarketTable里的TableContainer，设置宽度为100%，避免表格超出容器范围：

const MarketTable = () => {
  return (
    <TableContainer style={{ width: "100%" }}>
      <Table size="sm">
        {/* 原表格内容保持不变 */}
      </Table>
    </TableContainer>
  );
};

步骤3：给Split容器设置基础高度（可选） #

如果你的Split组件没有默认占满视口高度，可以给它的split类添加高度样式，确保整个布局正常：

.split {
  height: 100vh; /* 让Split占满整个视口高度 */
}

为什么这样有效？ #

• height="100%"让Market容器固定了垂直高度，内容超出时会立即显示垂直滚动条。
• overflow="auto"会同时监听水平和垂直方向的内容溢出，一旦表格宽度超过容器，水平滚动条会直接显示在容器底部，无需向下滚动。
• 表格容器的width:100%确保表格不会超出外层容器的宽度范围，触发正确的滚动行为。

这样调整后，第一个面板的垂直和水平滚动条就会同时显示，你可以直接操作水平滚动，不需要先向下滚动啦！

内容的提问来源于stack exchange，提问作者Diogo