Почему компоненты React перекрываются, даже если для него установлено положение: stati c или относительный 0 - PullRequest
Новая
       33

Почему компоненты React перекрываются, даже если для него установлено положение: stati c или относительный 0

0 голосов
/ 04 августа 2020

Просто изучаю React! Мне нужна помощь в том, почему это меню перекрывается, как это показано на изображении: Красное кольцо, изображения go под меню и горизонтальные полосы прокрутки, но их не должно быть.

См. CodeSandbox

enter image description here

This is the wrapper for the left Menu and the right MasonryGrid.

import React from 'react'
import '../Styles//Components/Wrapper-style.scss'
import Menu from './Menu'
const Wrapper = (props) => {
    return (
          {props.children}  )} экспорт по умолчанию Wrapper

И это S CSS для Wrapper 

.wrapper{
  display: flex;
  flex-direction: column;
  color: white;
  width: 100vw;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.479);
  .menu-container{
 width: 100%; 
 height: 10%;
  }
  .children-container{
    position: relative;
    height: 85%;
    .content-container{
      &.page-enter {
        opacity: 0;
      }
      &.page-enter-active {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        opacity: 1;
        transition: opacity 600ms ease-in-out;
      }
      &.page-exit {
        opacity: 1;
      }
      &.page-exit-active {
        opacity: 0;
        transition: opacity 600ms ease-in-out;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
      }
    }
  }
}
@media(min-width:576px){
  .wrapper {
    flex-direction: row;
    width: 96vw;
    height: 96vh;
    border-radius: 5px;
    .menu-container {
      height: 100%;
      padding: 0;
      min-width: 20%;
      max-width: 20%;
    }
    .children-container {
      height: 100%;
      min-width: 80%;
      max-width: 80%;
    }
  }
}

Любые идеи, почему произошли смерти было бы решительно?

...