为非滚动页面适配垂直滚动列表的合理尺寸

需要构建一个适配桌面/大尺寸平板的非滚动Dashboard页面，分为左右两个区域：

• 右侧：可缩放适配可用空间的图片展示区
• 左侧：最近更新描述列表（每条描述单行显示）

列表容器需满足以下特性：

1. 宽度自动适配最长描述的宽度
2. 高度自动调整，尽可能多显示行，且不超出页面底部
3. 列表行数超出可用垂直空间时，容器延伸至页面底部并显示垂直滚动条
4. 列表可完全容纳时，容器无滚动条，也不显示滚动槽

核心思路 #

利用Flexbox布局让列表容器自动占据左侧区域的剩余垂直空间，结合overflow-y: auto实现内容超出时才显示滚动条，同时用width: fit-content保证容器宽度适配最长描述。

CSS 修改要点 #

1. 调整整体Flex布局，让各区域自动分配空间
2. 移除列表容器的固定高度，改用Flex属性实现动态高度
3. 优化滚动行为，仅在内容超出时显示滚动条

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  width: 100%;
  background: lightgray;
  margin: 0;
  padding: 0;
}

.main-div {
  display: flex;
  flex-flow: column;
  height: 100%;
  margin: 0 1em;
}

.hdr-div {
  text-align: center;
  flex-shrink: 0; /* 固定头部高度，避免被挤压 */
}

.lr-split-div {
  display: flex;
  flex-flow: row;
  width: 100%;
  flex: 1; /* 占据main-div剩余高度 */
  gap: 1em; /* 左右区域间隙 */
}

/**** LEFT SIDE ****/
.left-side {
  flex: 1;
  display: flex;
  flex-flow: column;
  background: pink;
  padding: 0 1em;
}

/**** Leftside content ****/
.left-top-div {
  margin-bottom: 15px;
  flex-shrink: 0; /* 固定顶部文本高度 */
}

.scrollable-container {
  width: fit-content; /* 宽度适配最长内容 */
  flex: 1; /* 填充左侧剩余垂直空间 */
  padding: 10px;
  border: 4px solid #888;
  overflow-y: auto; /* 内容超出时显示滚动条 */
  min-height: 100px; /* 避免内容过少时容器塌陷 */
}

.scrollable-content {
  width: 100%;
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 10px;
  padding: 5px 10px;
}

.scrollable-table-col2 {
  white-space: nowrap; /* 强制单行显示 */
}

/**** RIGHT SIDE FOR SLIDESHOW ****/
.right-side {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: cyan;
}

HTML 调整 #

修正原代码中<head>标签未闭合的问题，其余结构保持不变：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body onload="load_scrollable_table(20)">
  <div class="main-div">
    <div class="hdr-div">
      <h1>This is the page header with logo etc.</h1>
    </div>
    <div class="lr-split-div">

      <!-- ***** LEFT SIDE ***** -->
      <div class="left-side">
        <div class="left-top-div">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>

        <hr />

        <h2>Recent site updates:</h2>
        <div class="scrollable-container">
          <div id="table-insertion-point" class="scrollable-content">
            <!-- Javascript inserts table here -->
          </div>
        </div>
      </div>

      <!-- ***** RIGHT SIDE ***** -->
      <div class="right-side">
        Slideshow
      </div>
    </div>
  </div>
</body>

</html>

JS 代码保持不变 #

/* 填充可变行数的模拟数据 */
let my_limit;

function load_scrollable_table(limit) {
  let perday = 3;
  my_limit = limit;
  const my_div = document.querySelector("#table-insertion-point");
  for (let day = 1;; day++) {
    if (!insert_row(my_div, `3/${day}/2025`, 'Foobar etc.')) {
      return;
    }
    for (let thisday = 1; thisday < perday; ++thisday) {
      let v = "foo ".repeat(thisday * 4);
      if (!insert_row(my_div, '', 'Foobar more etc.' + v)) {
        return;
      }
    }
  }
}

function insert_row(my_div, col1, col2) {
  let my_row = `<div class="scrollable-table-col1">${col1}</div><div class="scrollable-table-col2">${col2}</div>`;
  my_div.innerHTML += my_row;
  return --my_limit > 0;
}

特性实现验证 #

• 宽度适配：scrollable-container的width: fit-content会自动根据列表中最长的单行描述调整宽度
• 动态高度：通过Flex布局的flex:1，容器自动填充左侧区域除顶部文本、标题外的所有剩余垂直空间，不会超出页面底部
• 按需滚动：overflow-y: auto确保只有当列表内容高度超过容器高度时，才显示垂直滚动条，否则无滚动槽
• 避免塌陷：min-height:100px保证内容过少时容器仍保持基础高度，避免视觉上的突兀

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