Выпадающее меню не перебирает div

Question

Я следую этому уроку https://blog.campvanilla.com/reactjs-dropdown-menus-b6e06ae3a8fe, чтобы сделать раскрывающийся список в моем приложении React.

Функция щелчка / открытия работает нормально, за исключением меню, которое находится внутри его собственного компонент не выходит за пределы контейнера заголовка:

Вот css для моего заголовка:

#inner-header {
  background-color: #f1c40f;
  font-family: "Rubik", sans-serif;
  font-weight: 700;
  display: flex;
  width: 100%;
  flex-direction: space-between;
  height: 60px;
  align-items: center;
  padding: 15px 0 15px 2.5%;
  align-items: top;
}

Учебное пособие не показывалось CSS для выпадающего списка, поэтому я создал свой собственный:

.drop-down {
  z-index: 1000;
  overflow-y: visible;
  width: 300px;
  background-color: white;
  display: block;
  box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.1), 0 4px 4px 0 rgba(0, 0, 0, 0.15);
}

Единственная разница между моим кодом и учебником состоит в том, что я импортировал компонент <Card /> в свой заголовок в компоненте React:

import React from 'react'
import {Link} from 'react-router-dom'
import logo from '../images/logo.svg'
import Card from '../components/Card'

export default function InnerHeader() {
    return (
        <>
        <div id="inner-header">
          <div className="logo">
            <Link to="/dashboard"><img src={logo} height="50px" alt="snack-page" /></Link>
          </div>
          <Card />
        </div>
      </>
    )
}

Я думал, что предоставление выпадающего z-индекса позволит ему go над заголовком, но это не так. Каков наилучший способ отобразить раскрывающийся список, пока он находится в своем собственном компоненте? Я не уверен, что решение будет в этом случае?

Answer 1

Мне удалось решить эту проблему путем внесения двух изменений в код на основе ответов здесь (слегка измененных)

Во-первых, flex-direction необходимо было установить на row.

Далее justify-content необходимо установить на space-between, как указал @JoeLloyd в моей опечатке.

Наконец, z-index теперь установлен на 3 и ему присвоено положение relative

#inner-header {
  background-color: #f1c40f;
  font-family: "Rubik", sans-serif;
  font-weight: 700;
  display: flex;
  width: 100%;
  height: 75px;
  justify-content: space-between;
  flex-direction: row;
  padding: 15px 0 15px 2.5%;
  align-items: top;
}

.menu-button {
  padding-right: 15px;
  float: right;
}

.drop-down {
  z-index: 3;
  margin-right: 12px;
  position: relative;
  width: 200px;
  height: 200px;
  display: inline-block;
  background-color: white;
  box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.1), 0 4px 4px 0 rgba(0, 0, 0, 0.15);
}

Answer 2

неправильное направление изгиба

Установите его в столбец, если вы хотите, чтобы ваш контент был go в столбце, а не в строке. Нет такой вещи как flex-direction: space-between;

flex-direction: column;