<分区>
<分区>
尝试让容器 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 中。
最佳答案
只需将 overflow: hidden 添加到 .right 即可:
.right {
background-color: green;
padding: 5px;
overflow: hidden
}
这将确保红色框不会溢出其父框并允许在其中滚动。
关于html - 容器 div 溢出父级而不是显示水平滚动条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52433823/