为什么我的子 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 似乎存在于页面顶部的某个地方，但它不可见。

Answer 1

删除<div class="container">，然后尝试...<div class="inner">是弹性子项，需要位于弹性父项的正下方<div class="outer" id="content">

编辑：这完全是一个CSS问题，而不是反应问题。