我试图添加这个简单的导航栏，但当我给予过滤器display: flex;这些按钮实际上在窗口中对齐。我希望它们有一个静态的宽度，并希望给予它们一个水平滚动属性。我试着做了overflow-x: scroll;，但没有工作。

而且当我给予overflow-x属性时，我的下拉列表现在在垂直轴上滚动的div中打开。
我怎样才能使导航栏看起来像这样？

import React from "react";
import style from "../styles/navbar.module.css";
import Select from "react-select";

const FilterBtn = (props) => {
  const options = [
    { value: "chocolate", label: "Chocolate" },
    { value: "strawberry", label: "Strawberry" },
    { value: "vanilla", label: "Vanilla" },
  ];

  return (
    <>
      <div className={style.DropDown}>
        <Select options={options} placeholder={props.filterType}></Select>
      </div>
    </>
  );
};

const Navbar = () => {
  return (
    <>
      <div className={style.Container}>Inventory Inspector</div>
      <div className={style.Filters}>
        <FilterBtn filterType={"Price"} />
        <FilterBtn filterType={"Brand"} />
        <FilterBtn filterType={"Size"} />
        <FilterBtn filterType={"Type"} />
        <FilterBtn filterType={"Quantity"} />
      </div>
    </>
  );
};

export default Navbar;

navbar.module.css

.Container {
  width: 100%;
  height: 6.5vh;
  background-color: #eeeeee;

  display: flex;
  justify-content: left;
  align-items: center;
  font-size: 1.3rem;
}
.Filters {
  width: 100vw;
  height: 6.5vh;
  background-color: #f87d7d;

  display: flex;
  align-items: center;
}

.DropDown {
  margin: 0 0.2rem;
  width: 200px !important;
}