Need help for horizontal scroll

[ooo2003003v2]

Hello there. I've tried to turn on horizontal and vertical scroll for my table however I 've tried to trun on the horizontal but it doesnt showed up. I am now using overflow-x: auto for my horizontal scroll but the scrollarea doesnt fillin the width for my container. Any idea why?

[ooo2003003v2]

I found the problem. Apparently I need to add width: fit-content to the scrollarea-content to fill in the width for my table.

scss

.table{
   white-space: nowrap;
    height: 70vh;
   &-scroll-area {
        height: 100%;
        white-space: nowrap;
        & > .scrollarea-content {
            width: fit-content;
        }
    }
    &-body {
        &-scroll-area {
            max-height: calc(100% - 48px);
        }
    }
}

component

<ScrollArea
          className={["table-scroll-area"].join(" ")}
          ref={tableScroll}
          speed="1.5"
          smoothScrolling={true}
        >
          <div className="table" > 

            <ScrollArea
              className={"table-body-scroll-area"}
              ref={tbodyScroll}
              speed="1.5"
              smoothScrolling={true}
            >
                <div className="table-body">... </div>
            </ScrollArea>
          </div>
</ScrollArea>