Fluent UI Input Element not shrinking

Question

I am creating a react application, using Fluent-React as my components source and use TailwindCSS for my CSS ( Align,Flex,Positioning etc. ).

In my page I have a FluentUI Input component, it is not shrinking as the browser screen-width reduces. It is still expanding and overflowing.

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;

Please find the image below which shows the overflowing textbox