react - 打开下拉菜单将导致容器扩展答案

【问题标题】：react - open dropdown will lead to container expandingreact - 打开下拉菜单将导致容器扩展
【发布时间】：2021-09-02 14:20:51
【问题描述】：

这是尚未展开的栏和下拉菜单。

当我展开栏时：

它扩展了容器。

我的期望是

画得不好，但我想你明白了。

Appcontain <Bar/> 其中包含<Dropdown/>

代码沙盒：
https://codesandbox.io/s/focused-johnson-3kmto?file=/src/App.js

【问题讨论】：

标签： javascript css reactjs flexbox

【解决方案1】：

这是一个 CSS 问题，您的 .dropdown .dropdown__list 样式显示为块级元素，这将影响其父级的大小。

您可以将该选择器的 CSS 更改为以下内容：

.dropdown .dropdown__list {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  /* New properties added below */
  position: absolute;      /* Position this out of the regular flow */
  z-index: 100000;         /* Dropdowns should usually overlap whatever is below them */
  width: 100%;             /* Match the width of its parent element */
  margin: 0;               /* Remove unwanted spacing */
  border: 1px solid grey;  /* Add a border to match its parent */
  border-top: none;        /* Optionally, remove the border between the options and their parent */
  left: -1px;              /* Offset by the thickness of the border so everything lines up */
  background: #fff;        /* Add a background */
}

【讨论】：

【解决方案2】：

只需将以下三行添加到您的样式 css 中即可解决问题。

.dropdown .dropdown__list {
    position: absolute;
    top: 50px;
    left: 0;
}

编辑：对不起，应该解释一下这里发生了什么。属性position: absolute 将相对于最近的父元素position: relative 放置元素。之后，您可以使用top、left、right、bottom 来自定义位置。

【讨论】：

【解决方案3】：

.school { display: flex; flex-direction: column; max-height: 72px;}

将 max-height 添加到您的 .school css 属性中

【讨论】：

【解决方案4】：

这里的Bar 组件应该是这样的：

import React from "react";

import ImageIcon from "@material-ui/icons/Image";
import Dropdown from "./Dropdown";

import "./styles.css";

function Bar(props) {
  const {
    fileTypes,
    handleTypeChange,
    selectedFileType,
    isTypeDropdownOpen,
    setIsTypeDropdownOpen
  } = props;
  return (
    <div
      className="school__bar school__filter-bar"
      style={{ position: "relative", height: "68px" }}
    >
      <div className="school__filter-bar__dropdown">
        <button className="school__filter-bar__dropdown__btn">
          <ImageIcon />
        </button>
      </div>
      <div
        className="school__filter-bar__section"
        style={{ position: "absolute", left: "38px" }}
      >
        <div className={"school__filter-bar__section__type"}>
          <Dropdown
            options={fileTypes}
            onOptionClick={handleTypeChange}
            currentOption={selectedFileType}
            isOpen={isTypeDropdownOpen}
            setIsOpen={setIsTypeDropdownOpen}
          />
        </div>
      </div>
    </div>
  );
}

export default Bar;

链接codesandbox

【讨论】：