我正在創建一個react應用程序，使用Fluent-React作為我的組件源，并使用TailwindCSS作為我的CSS ( Align，Flex，Positioning等)。).

在我的頁面中，我有一個FluentUI輸入組件，它不會隨著瀏覽器屏幕寬度的減小而縮小。它還在膨脹，還在泛濫。

App.js

import "./App.css";
import AppContainer from "./pages/AppContainer";
import { FluentProvider, webLightTheme } from "@fluentui/react-components";
import { initializeIcons } from '@fluentui/react/lib/Icons';

initializeIcons();
function App() {
  return (
    <>
      <FluentProvider theme={webLightTheme}>
        <AppContainer />
      </FluentProvider>
    </>
  );
}

export default App;

AppContainer.js

import Dashboard from "./Dashboard";
import React from "react";

function AppContainer() {
  return (
    <>
      <div className="flex">
            <Dashboard/>
      </div>
    </>
  );
}

export default AppContainer;

Dashboard.js

import React from "react";
import ActionBar from "../components/ActionBar";

function Dashboard() {
  return (
    <div className="border border-green-800 grow">
      <ActionBar />
    </div>
  );
}

export default Dashboard;

ActionBar.js

import {
  Input,
  Toolbar,
  ToolbarButton,
  makeStyles,
  shorthands
} from "@fluentui/react-components";
import { AddCircle20Regular, Search20Regular } from "@fluentui/react-icons";
import React from "react";

const custom = makeStyles({
  input: {
    flexShrink: 1
  }
})
function ActionBar() {
  const classes = custom();
  return (
    <div className="flex border border-red-400">
      <Input
      className={classes.input}
        contentBefore={<Search20Regular />}
        placeholder="Search by Thing type"
      />
      
    </div>
  );
}

export default ActionBar;

請找到下面顯示溢出文本框的圖像