容器 div 溢出父级，而不是显示水平滚动条

Question

尝试让容器div在其子级太长时显示水平滚动条。相反，容器div 本身会溢出其父级。

这是我的代码：

.root {
background-color: blue;
padding: 5px;
display: flex;
}
.left {
background-color: yellow;
flex: 0 0 auto;
width: 60px;
}
.right {
background-color: green;
padding: 5px;
}
.container {
overflow-x: scroll;
}
.content {
background-color: red;
width: 900px;
height: 100px;
}

<div class="root">
<div class="left">
</div>
<div class="right">
<span>Hello World</span>
<div class="container">
<div class="content">
</div>
</div>
</div>
</div>

理想情况下，绿色div 不会溢出其父级(蓝色div(，也不会有滚动条。水平滚动条应出现在container类div 中。

Answer 1

只需将overflow: hidden添加到.right：

.right {
background-color: green;
padding: 5px;
overflow: hidden
}

这将确保红框不会溢出其父项，并允许在其中滚动。