页面级布局

需求：左右两侧布局

 <div class="container">
    <!-- 左侧列yi -->
    <div class="left-column">
      <div class="top-section">
        <!-- 组件 A 上部分 -->
        <h2>组件 A 上部分</h2>
        <!-- 添加组件 A 上部分的内容 -->
      </div>
      <div class="bottom-section">
        <!-- 组件 A 下部分（可滚动且占满剩余高度） -->
        <h2 v-for="item of 40">{{ item }}</h2>
        <!-- 添加组件 A 下部分的内容 -->
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...</p>
        <!-- 添加更多内容以触发滚动条 -->
      </div>
    </div>

    <!-- 右侧列 -->
    <div class="right-column">
      <!-- 组件 B -->
      <div class="top-section">
        <!-- 组件 B 上部分 -->
        <h2>组件 B 上部分</h2>
        <!-- 添加组件 B 上部分的内容 -->
      </div>
      <div class="bottom-section">
        <!-- 组件 B 下部分 -->
        <h2>组件 B 下部分</h2>
        <!-- 添加组件 B 下部分的内容 -->
      </div>
    </div>
  </div>

/* 样式用于控制页面布局 */
.container {
  display: flex;
  height: 700px; /* 固定页面高度 */
}

.left-column {
  flex-grow: 1; /* 组件A占据剩余空间 */
  /* padding: 10px; */
  display: flex;
  flex-direction: column; /* 垂直方向排列子元素 */
  border-right: 1px solid red;

  .top-section {
    border: 1px solid #ccc;
    /* padding: 10px; */
    /* margin: 5px; */
  }

  /* 设置组件 A 下部分容器的样式 */
  .bottom-section {
    flex-grow: 1; /* 占满剩余高度 */
    border: 1px solid #ccc;
    /* padding: 10px; */
    /* margin: 5px; */
    overflow: auto; /* 添加滚动条 */
  }
}

.right-column {
  width: 200px; /* 固定组件B的宽度 */
  /* padding: 10px; */

  .top-section {
    border: 1px solid #ccc;
    /* padding: 10px; */
    margin: 5px;
  }

  .bottom-section {
    border: 1px solid #ccc;
    padding: 10px;
    margin: 5px;
  }
}

愿世间没有css...