Mantine ScrollArea无法占满父容器高度的解决方案咨询

问题描述 #

使用Mantine的ScrollArea组件时，将其h属性设为100%并包裹在高度为100vh的div中，但ScrollArea会额外生成一个未占满100%高度的div，导致内部橙色容器无法继承父容器的100vh高度。不想直接将橙色容器设为100vh（会影响滚动功能），需要让ScrollArea内部内容占满父容器高度。

代码示例 #

import { FC } from 'react';

import { ScrollArea } from '@mantine/core';

export const App: FC = () => {
  return (
    <div>
      <div style={{ height: '100vh' }}>
        <ScrollArea h="100%">
          <div
            style={{
              width: 300,
              height: '100%',
              background: 'orange',
              display: 'flex',
              flexGrow: 1,
            }}
          >
            hello!!
          </div>
        </ScrollArea>
      </div>
    </div>
  );
};

解决方案 #

• 方法一：利用Mantine的styles属性定制内部容器
  ScrollArea内部负责承载内容的容器默认类名为viewport，通过styles属性强制它占满100%高度，即可让内部橙色容器继承该高度：

import { FC } from 'react';

import { ScrollArea } from '@mantine/core';

export const App: FC = () => {
  return (
    <div>
      <div style={{ height: '100vh' }}>
        <ScrollArea 
          h="100%"
          styles={{
            viewport: { height: '100%' }
          }}
        >
          <div
            style={{
              width: 300,
              height: '100%',
              background: 'orange',
              display: 'flex',
              flexGrow: 1,
            }}
          >
            hello!!
          </div>
        </ScrollArea>
      </div>
    </div>
  );
};

• 方法二：使用flex布局让内部内容自动填充
  给ScrollArea添加display: flex样式，同时将橙色容器的height改为auto，保留flexGrow: 1让它自动填充容器空间：

import { FC } from 'react';

import { ScrollArea } from '@mantine/core';

export const App: FC = () => {
  return (
    <div>
      <div style={{ height: '100vh' }}>
        <ScrollArea 
          h="100%"
          style={{ display: 'flex' }}
        >
          <div
            style={{
              width: 300,
              height: 'auto',
              flexGrow: 1,
              background: 'orange',
              display: 'flex',
            }}
          >
            hello!!
          </div>
        </ScrollArea>
      </div>
    </div>
  );
};

效果说明 #

两种方法都能让橙色容器完全填充ScrollArea的高度，当内部内容超出容器高度时，ScrollArea的滚动功能依然正常生效，不会因为设置固定高度而失效。

内容的提问来源于stack exchange，提问作者sir-haver