How to set the tab container's width to be the width of the widest tab?

[ziyuang]

This doesn't work as the container div's width is too small to hold the wide tab.

import { useRef, useEffect, useState } from "react";
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
import "react-tabs/style/react-tabs.css";

export const MyTab = () => {
  const containerRef = useRef<HTMLDivElement>(null);
  const [maxTabWidth, setMaxTabWidth] = useState(0);

  useEffect(() => {
    if (containerRef.current) {
      let maxWidth = 0;
      const tabElements =
        containerRef.current.querySelectorAll<HTMLElement>(".react-tabs__tab");
      tabElements.forEach((tab) => {
        const width = tab.offsetWidth;
        if (width > maxWidth) {
          maxWidth = width;
        }
      });
      setMaxTabWidth(maxWidth);
    }
  }, []);

  return (
    <div
      ref={containerRef}
      style={{ width: maxTabWidth }}
    >
      <Tabs>
        <TabList>
          <Tab>Tab 1</Tab>
          <Tab>Tab 2</Tab>
        </TabList>
          <TabPanel>
            Narrow tab
          </TabPanel>
        <TabPanel>
          {Array(100).join("a")}
        </TabPanel>
      </Tabs>
    </div>
  );
}

CodeSandbox

[ziyuang]

Looks like the class is .react-tabs__tab-panel. Although it doesn't fix my real case it fixes the simplified version in the sandbox.