如何实现3行的div，顶行是固定大小的内容，中间行是可滚动的DIV，底行是状态栏

<div class="container">
  <div class="top-row">
    <!-- 固定大小的内容 -->
  </div>
  <div class="middle-row">
    <div class="scrollable-content">
      <!-- 可滚动的DIV内容 -->
    </div>
  </div>
  <div class="bottom-row">
    <!-- 状态栏内容 -->
  </div>
</div>

.container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 设置容器高度为视窗的100% */
}

.top-row {
  height: 50px; /* 设置固定大小的内容高度 */
}

.middle-row {
  flex-grow: 1; /* 让中间行占据剩余空间 */
  overflow-y: scroll; /* 添加垂直滚动条 */
}

.bottom-row {
  height: 30px; /* 设置状态栏高度 */
}