頁面級佈局

需求：左右兩側佈局

 <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...