如何修复CSS Overflow与Flex布局的导航栏异常问题？

问题描述 #

给Filters容器设置display: flex后，内部按钮会自动适配窗口宽度收缩。需求是让按钮保持固定宽度，容器支持横向滚动——尝试添加overflow-x: scroll未生效。此外，设置overflow-x后，react-select的下拉菜单被容器裁剪，还出现了垂直滚动条。

原始代码 #

React组件 #

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;

CSS样式（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;
}

解决方案 #

1. 修复横向滚动失效与按钮宽度问题 #

flex容器默认会让子元素收缩以适应容器宽度，需明确禁止换行并启用横向溢出：

• 给.Filters添加flex-wrap: nowrap（强制子元素横向排列）和overflow-x: auto（超出时显示滚动条）
• 给.DropDown添加flex-shrink: 0，阻止按钮被压缩，保持固定宽度

2. 解决下拉菜单被容器裁剪问题 #

react-select的下拉菜单默认挂载在组件内部，会被父容器的overflow属性限制，需将菜单挂载到body上：

• 给Select组件添加menuPortalTarget={document.body}属性
• 自定义菜单样式，设置position: fixed避免位置偏移

修改后的代码 #

React组件 #

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

const FilterBtn = (props) => {
  const options = [
    { value: "chocolate", label: "巧克力" },
    { value: "strawberry", label: "草莓" },
    { value: "vanilla", label: "香草" },
  ];

  // 自定义菜单样式，避免位置偏移
  const customStyles = {
    menu: (provided) => ({
      ...provided,
      position: "fixed",
      zIndex: 999,
    }),
  };

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

const Navbar = () => {
  return (
    <>
      <div className={style.Container}>库存检查器</div>
      <div className={style.Filters}>
        <FilterBtn filterType="价格" />
        <FilterBtn filterType="品牌" />
        <FilterBtn filterType="尺寸" />
        <FilterBtn filterType="类型" />
        <FilterBtn filterType="数量" />
      </div>
    </>
  );
};

export default Navbar;

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;
  /* 启用横向滚动 */
  overflow-x: auto;
  /* 禁止子元素换行 */
  flex-wrap: nowrap;
  /* 允许垂直方向内容溢出，避免下拉菜单触发滚动 */
  overflow-y: visible;
}

.DropDown {
  margin: 0 0.2rem;
  width: 200px !important;
  /* 禁止按钮被压缩 */
  flex-shrink: 0;
}

/* 可选：美化横向滚动条 */
.Filters::-webkit-scrollbar {
  height: 6px;
}
.Filters::-webkit-scrollbar-thumb {
  background-color: #d35454;
  border-radius: 3px;
}

内容的提问来源于stack exchange，提问作者Gourav Singh Rawat