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

Question

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

这是我的代码：

const client = redis.createClient(
  process.env.REDIS_PORT,
  process.env.REDIS_HOST
);
client.auth(process.env.REDIS_PASSWORD);

.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不会溢出其父级（蓝色div），也不会具有滚动条。水平滚动条应显示在<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中。

Answer 1

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

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

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