Html 将网站分为三个独立的元素

我一直在尝试设计一个新的想法，但我在实际页面上的定位问题

我的想法是在左边有一个菜单部分，中间有一个进给，另一个菜单在左边，但是，我好像不能得到正确的定位。

我希望这两个菜单共享相同的设置，并且不可滚动，但是中间的提要段可以滚动，因为它将通过数据库更新内容

有什么想法吗

state=“最小化”；
功能controlCenter（）{
如果（状态==“最小化”）{
document.getElementById（“centerExpandable”）.style.display=“block”；
state=“扩展”；
控制台日志（“扩展”）；
}else if（状态==“扩展”）{
document.getElementById（“centerExpandable”）.style.display=“无”
state=“最小化”；
console.log（“最小化”）
}否则{
console.log（“无效值”+状态）；
}
}

.wrapper{
显示器：flex；
弹性：1；
}
.对{
背景色：红色；
宽度：20%；
身高：80%；
}
.中心{
背景颜色：粉红色；
宽度：40%；
保证金：自动；
}
.中心可扩展{
背景颜色：浅蓝色；
显示：无；
}
.左{
背景颜色：绿色；
宽度：20%；
身高：80%；
}

我在右面板
我在中央面板
Im可扩展内容

仅任务

您可以像这样使用flexbox：

#容器
{
显示器：flex；
宽度：500px；
高度：100px；
} 
#左，#右
{
背景颜色：绿色；
宽度：100px；
}
#居中
{
弹性：1；
背景颜色：蓝色；
溢出y：自动；
}

您能向我们展示一下您的工作成果吗？正如@JerdineSabio所说的，我们将提供一些您的工作成果，以便我们能够找到解决方案。最有可能的是，您可以使用CSS网格来实现这一点，或者您可以使用任何其他CSS框架，如bootstrap或materialize CSSWelcome to Stack Overflow！希望您至少尝试自己编写此代码。我建议你做一些尝试，或者通过谷歌，或者通过搜索，尝试一下，如果你仍然有问题，带着你的代码回来，解释你尝试了什么。@JerdineSabio我把我写的代码添加到我的帖子中，谢谢你的帮助！