CSS布局问题：固定蓝色Title与黄色栏，实现内容滚动

现有布局结构如下，需求明确：

• 蓝色的.title容器和黄色的.lowerbar容器必须固定位置，不能随页面滚动跑掉
• 要是.title里的内容太多超出了可用空间，得能滚动查看
  还有硬性限制：
• 动不了HTML里div的排列顺序
• 不能写死任何高度（.title和.lowerbar的高度都是运行时算出来的）
• 只能改CSS来实现

目前的代码只能让黄色栏固定，蓝色标题会跟着页面滚，达不到要求。

直接上修改后的CSS，核心调整了flex布局的空间分配，完美满足需求：

body {
  height: 100vh;
  margin: 0;
  background-color: white;
}

.app {
  margin: auto;
  height: 100vh; /* 改成占满视口高度，给flex布局明确的基准 */
  max-width: 600px;
  background-color: black;
  display: flex;
  flex-direction: column;
}

.main {
  background-color: orange;
  flex: 1; /* 让main占满app除了lowerbar之外的所有空间 */
  display: flex;
  flex-direction: column; /* 内部改成垂直flex布局 */
  overflow: hidden; /* 隐藏溢出，避免整个main跟着滚动 */
}

.title {
  background-color: blue;
  overflow-y: auto; /* 内容超出时显示垂直滚动条 */
  flex-shrink: 0; /* 保证标题高度不被压缩，自适应内容 */
}

.rowcontainers {
  background-color: red;
  flex: 1; /* 占满main除了title之外的剩余空间 */
  overflow-y: auto; /* 内容过多时滚动 */
}

.lowerbar {
  background-color: yellow;
  height: 56px; /* 示例高度，实际可移除，由内容自动计算 */
  flex-shrink: 0; /* 固定底部栏高度，不被flex压缩 */
}

关键调整说明 #

1. .app用height:100vh替代max-height:100%，确保flex容器有明确的高度参考，空间分配才会生效
2. .main设置flex:1抢占剩余空间，内部改成垂直flex布局，同时overflow:hidden避免整体滚动
3. .title加overflow-y:auto实现自身内容滚动，flex-shrink:0保证高度不受外部压缩
4. .rowcontainers用flex:1占据.main剩下的空间，自身内容超出时滚动
5. .lowerbar加flex-shrink:0固定在底部，不会被flex布局压缩高度

原HTML保持不变：

<div class="app">
  <div class="main">
    <div class="title">
      THIS TITLE HAS TO ALWAYS STAY HERE
    </div>
    <div class="rowcontainers">
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
    </div>
  </div>
  <div class="lowerbar">LOWER BAR AS TO ALWAYS STAY HERE</div>
</div>

内容的提问来源于stack exchange，提问作者LLL