Html 在flexbox div中添加可滚动div

我想添加在我的主页布局，其中有左，右面板滚动

在右面板内，我希望有可滚动的div，但整个页面不应该有滚动条

我做了以下几件事

body{
高度：100vh；
}
.车身容器{
背景：黄色；
显示器：flex；
柔性包装：包装；
}
.左面板{
背景：红色；
弹性：1；
右边距：1px；
}
.右面板{
背景：绿色；
显示器：flex；
柔性流动：柱；
flex:30自动；
}
.内容容器{
显示器：flex；
弯曲方向：立柱；
弹性：1；
}
.固定收割台{
背景：浅绿色；
}
.可滚动内容{
弹性：1；
溢出y：自动；
背景：浅蓝色；
}

左面板

右面板

固定收割台

固定收割台

固定收割台

固定收割台

固定收割台

固定收割台

可滚动

可滚动

可滚动

可滚动

可滚动

可滚动

可滚动

可滚动

可滚动

可滚动

可滚动

可滚动

可滚动

尝试此操作，添加最大高度和溢出-y以滚动

body{
高度：100vh；
}
.车身容器{
背景：黄色；
显示器：flex；
柔性包装：包装；
}
.左面板{
背景：红色；
弹性：1；
右边距：1px；
}
.右面板{
背景：绿色；
显示器：flex；
柔性流动：柱；
flex:30自动；
}
.内容容器{
显示器：flex；
弯曲方向：立柱；
弹性：1；
}
.固定收割台{
背景：浅绿色；
}
.可滚动内容{
弹性：1；
溢出y：滚动；
最大高度：200px；
背景：浅蓝色；
}

左面板


右面板


固定收割台


固定收割台


固定收割台


固定收割台


固定收割台


固定收割台


可滚动


可滚动


可滚动


可滚动


可滚动


可滚动


可滚动


可滚动


可滚动


可滚动


可滚动


可滚动

以下是您要查找的内容吗

我刚刚给你的

。可滚动内容

规则增加了一个高度

.scrollable-content{
  flex:1;
  overflow-y:auto;
  background:lightBlue;
  height: 100vh; /*Constrain the height */
}

---

添加固定高度将限制您的

。可滚动内容
，然后限制您的
溢出-y:auto将启动并处理其余部分。
提到要滚动的div的高度。并启用scroll-y:auto

为您添加了一把小提琴：

`https://jsfiddle.net/Safoora/cpcygkno/6/`

Hope it will help.

我找到了一种方法，我们不需要在childdiv上设置一个高度来使其可滚动


正文{
高度：100vh；
宽度：100vw；
显示器：flex；
弯曲方向：立柱；
填充：0；
保证金：0；
}
.车身容器{
flex:1：背景：#fff；
填充：10px；
框大小：边框框；
溢出：隐藏；
显示器：flex；
}
.左面板{
背景：红色；
弹性：1
}
.右面板{
背景：绿色；
弹性：3；
显示器：flex；
弯曲方向：立柱；
}
.内容容器{
弹性：1；
显示器：flex；
弯曲方向：立柱；
}
.固定标题{}.可滚动内容{
弹性：1；
溢出x：隐藏；
溢出y：自动；
}

我的左面板

测试我的右面板

固定收割台

固定收割台

固定收割台

可滚动

可滚动

可滚动

可滚动

可滚动

可滚动

可滚动

可滚动

可滚动

可滚动

可滚动

可滚动

在Firefox 61.0.1 64位Windows 8.1 Pro中不起作用。