Почему в родительском компоненте React отображается только часть моего дочернего компонента React?

Question

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

class Seasonal extends React.Component{


    componentDidMount(){

        const container = document.querySelector(".container");
        const lefty = document.querySelector(".lefty");
        let translate = 0;

        lefty.addEventListener("click", function() {
            translate += 200;
            container.style.transform = "translateX(" + translate + "px" + ")";
        });

        const righty = document.querySelector(".righty");
        righty.addEventListener("click", function() {
            translate -= 200;
            container.style.transform = "translateX(" + translate + "px" + ")";
        });

    }


    render() {
        return(
                <div>                   

                    <button class="lefty paddle" id="left-button"></button>
                    <div class="outer" id="content" >
                      <div class="container">
                        <div class="inner" style={{background:'red'}}></div>
                        <div class="inner" style={{background:'red'}}></div>
                        <div class="inner" style={{background:'red'}}></div>
                        <div class="inner" style={{background:'red'}}></div>
                        <div class="inner" style={{background:'red'}}></div>
                      </div>
                    </div>
                    <button class="righty paddle" id="right-button"></button>

                </div>
        )
    }


}
export default Seasonal

CSS для этого выглядит так: -

.outer {
  display: flex;
  overflow-x: hidden;
  overflow-y: hidden;

}

.inner {
  flex: 0 0 25%;
  height: 100px;
  margin:10px;
}
.paddle {
    position: absolute;
    top: 80px;
    bottom: 0;
    width: 30px;
    height:20px;
}

.lefty {
    left: 0;
}
.righty{
    right: 0;
}

Когда я используюв родительском компоненте отображаются только кнопки, «внешний» div не виден, в чем причина? Внешний div, если я нажимаю на элемент inspect, кажется, существует где-то вверху страницы, но его не видно.

Answer 1

Удалите <div class="container">, а затем попробуйте ... <div class="inner"> - это дочерние элементы flex, и они должны находиться непосредственно под родительским элементом flex <div class="outer" id="content">

edit: это полностью CSSпроблема, а не проблема реагирования.