Javascript 正确定位两个div-一个作为固定侧边栏，另一个作为扩展侧边栏

我有以下代码创建一个简单的网站，有两个部分；侧边栏和主要内容：

html, body {
  height: 100%;
  margin: 0;
}

.container {
  display: flex;
  flex-direction: row;
  height: 100%;
}

.sidebar {
  background-color: #FFF5BA;
  width: 200px;
}

.main {
  background-color: rgba(248, 248, 248, 1);
  flex-grow: 1;
} 

HTML如下所示：

<div class="container">
    <div class="sidebar">
    <div class="main">
</div> 

当您使用JavaScript动态地向主节添加更多内容时，就会出现我遇到的问题。如果添加的内容足够多，需要滚动，则侧边栏不会随着向下滚动而增长

理想情况下，我希望侧边栏作为固定内容与您一起滚动，但我已经了解到，您不能将flexbox与position:fixed结合使用

如果您需要在此处查看完整信息，请访问： （如果代码太草率，请提前道歉；我仍在学习）

---

谢谢你的帮助

我通过将模态代码移到

容器

类之外，更新了

html

代码。

我在

侧栏上使用了
位置：sticky
，并指定
高度：100vh
。这样，如果主内容高度大于
100vh
，它就不会滚动。




我还添加了dummy
book add
div，以增加主要内容的高度。




全屏查看结果，只有第一个添加按钮可以工作


//声明对象构造函数。
功能书（标题、作者、页面、isbn、阅读、bookURL）{
this.title=标题；
this.author=作者；
this.pages=页面；
这是isbn=isbn；
this.read=read；
this.bookURL=bookURL；
}
Book.prototype.toggleStatus=函数（）{
如果（this.read==“read”）{
this.read='未读取'；
返回1；
}else if（this.read=='Not read'）{
this.read='Reading'；
返回2；
}else if（this.read==“Reading”）{
this.read='read'；
返回3；
}
}
//初始化库变量。
让myLibrary=[]；
const container=document.querySelector（'.books container'）；
//显示和隐藏“添加书本”窗体。
const popup=document.querySelector（'.form popup'）；
const addBtn=document.querySelector（'.addBtn'）；
const cancelBtn=document.getElementById（'cancel-btn'）；
addBtn.addEventListener（'click'，函数（）{
popup.style.display='block'；//显示
})
cancelBtn.addEventListener（'click'，函数（）{
popup.style.display='none'；//隐藏
})
//######图书表单开始
// ##
//获取表单值
const form=document.getElementById（'form1'）；
表单.addEventListener（'submit'，函数（事件）{
const title=document.forms[0]。元素[1]。值；
常量author=document.forms[0]。元素[2]。值；
const pages=document.forms[0]。元素[3]。值；
常量isbn=document.forms[0]。元素[4]。值；
const bookURL=document.forms[0]。元素[0]。值；
//检查已选择的单选按钮。
让我们读一读；
if（document.getElementById（'read'）。选中）{
read='read'；
}else if（document.getElementById（'unread'）。选中）{
读取='未读取'；
}否则{
read=‘Reading’；
}
//防止页面刷新和关闭表单弹出窗口。
event.preventDefault（）；
popup.style.display='none'；
//加上我们的书。
addBookToLibrary（标题、作者、页面、isbn、阅读、bookURL）；
//显示书籍并重置表单。
render（）；
form.reset（）；
})
//显示我们的封面预览。
const cover=document.querySelector（“.cover preview”）；
const isbnField=document.getElementById（'isbn'）；//如果已键入ISBN
const coverURL=document.getElementById（'url'）；//以防URL已被使用。
coverURL.addEventListener（'change'，函数（）{
cover.style.background=`url（${document.forms[0].elements[0].value}）`；
cover.style.backgroundSize='cover'；
})
isbnField.addEventListener（'change'，function（）{
if（document.forms[0].elements[0].value==''）{//URL优先于用户选择的URL。
cover.style.background=`url(http://covers.openlibrary.org/b/isbn/${document.forms[0]。元素[4]。值}-M.jpg）`；
cover.style.backgroundSize='cover'；
}
})
//将给定书籍添加到myLibrary数组
函数addBookToLibrary（标题、作者、页面、isbn、阅读、bookURL）{
let book=新书（标题、作者、页面、isbn、阅读、图书URL）；
我的图书馆。推（书）；
}
// ##
//######书本形式结束
//在我们的HTML中显示书籍
函数render（）{
//先清理我们的空间。
const existingDivs=document.queryselectoral（“[databook]”）；
现有div.forEach（（div）=>{
div.remove（）；
});
for（设i=0；i