Html 带有嵌入式滚动div的Flexbox布局

我正在尝试使用flexbox创建此布局：

我无法使

左

框滚动

溢出-y:scroll

。相反，整个视口将滚动

我把所有的密码都放进去了

以下是基本结构：

<div id="wrap">
  <div id="attic">
    <h4 contenteditable="true" placeholder="Task title...">Attic (this is an editable title so the text can wrap and this div can grow in height)</h4>
  </div>
  <div id="split">

    <!-- Left Side -->
    <div id="main">
      <div id="notes">
        <p>Notes - this pane should scroll.</p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      </div>
      <div id="basement">
        Basement
      </div>
    </div>
    <!-- Right Side -->
    <div id="side">
      Side
    </div>
 
  </div>
</div>

---

有人知道我做错了什么吗？

您需要首先使主容器

溢出-y:hidden

。要使您的基础始终位于底部，请使用

flex-grow

使Notes部分增长。随后使用

height:90vh设置侧面部分和溢流-y的高度；溢出y：滚动。这里的
90vh
只是一个猜测高度。要获得更精确的值，它应该是
100vh-${Attic height}


#换行{
显示器：flex；
弯曲方向：立柱；
最大高度：100vh；
溢出y：隐藏；
}
#阁楼{
最小高度：60px；
背景#f2f2；
}
#分裂{
柔性生长：1；
显示器：flex；
}
#主要{
显示器：flex；
背景：#CCF5FF；
弯曲方向：立柱；
}
#注释{
背景：#E2F9D4；
最小宽度：440px；
高度：计算（90vh-50px）；
柔性生长：1；
溢出y：滚动；
}
#地下室{
对齐内容：柔性端；
高度：50px；
背景：#EEE；
}
#侧面{
背景：#B3F0DD；
最小宽度：300px；
高度：90vh；
溢出y：滚动；
}

阁楼（这是一个可编辑的标题，因此文本可以换行，该div可以增加高度）
注意-此窗格应滚动

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本

地下室
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，雷马尼
#wrap{
  display:flex;
  flex-direction: column;
  height:100vh;
}
#attic{
  min-height:60px;
  background:#F2F2F2;
}
#split{
  flex-grow:1;
  display:flex;
}
#main{
  display:flex;
  background:#CCF5FF;
  flex-direction: column;
}
#notes{
  background:#E2F9D4;
  min-width:440px;
  overflow-y:scroll;
}
#basement{
  height:50px;
  background:#EEE;
}
#side{
  background:#B3F0DD;
  min-width:300px;
}