CSS实现两个可缩放子元素高度不超出父视口的方案

需求概述 #

基于现有Electron页面，实现SQL输入框和agGrid结果容器可垂直自由缩放，且两者总高度始终不超过视口，避免页面内容溢出，窗口整体缩放逻辑由Electron应用处理，仅通过CSS完成布局控制。

原始HTML（无需修改） #

<div class="queryForm">      
  <div class="querySetup">
    <textarea id="SQL"></textarea>        
    <button id="odbcResultsQuery">Execute Query</button>        
  </div>
  <div class="tableContainer ag-theme-alpine" id="agGrid">
    
  </div>      
</div>

修改后的CSS实现 #

/* 重置默认边距，消除布局干扰 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh; /* 占满整个视口高度 */
  width: 100vw; /* 占满整个视口宽度 */
  overflow: hidden; /* 禁止页面整体滚动 */
}

.queryForm {
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
  height: 100%; /* 继承body的视口高度 */
  width: 100%;
  gap: 10px; /* 查询区域与表格容器的间距 */
  padding: 10px; /* 避免内容贴边 */
}

.querySetup {
  display: flex;
  flex-direction: column;
  gap: 8px; /* 输入框与按钮的间距 */
  min-height: 120px; /* 限制查询区域最小高度，防止缩至不可用 */
  flex-shrink: 0; /* 禁止查询区域被压缩 */
}

.querySetup textarea {
  flex: 1; /* 自动填充查询区域的可用高度 */
  resize: vertical; /* 仅允许垂直缩放 */
  min-height: 80px; /* 设置输入框最小高度 */
  padding: 8px;
}

.querySetup button {
  padding: 6px 0;
  min-height: 32px; /* 设置按钮最小高度 */
}

.tableContainer {
  flex: 1; /* 自动填充视口剩余高度 */
  min-height: 150px; /* 限制表格容器最小高度 */
  resize: vertical; /* 允许垂直缩放 */
  overflow: auto; /* 表格内容超出时显示滚动条 */
}

/* 保留原有表格样式 */
table {
  width: 100%;
}

tr td {
  max-width: 100%;
  white-space: nowrap;
}

关键修改说明 #

1. Flex弹性布局：通过垂直方向的flex布局，让查询区域和表格容器自动分配视口高度，保证总高度不溢出
2. 视口边界限制：body设置100vh高度和overflow: hidden，彻底避免页面整体滚动
3. 弹性高度分配：表格容器使用flex:1自动填充剩余空间，输入框通过flex:1填充查询区域的可用高度，同时保留垂直缩放能力
4. 最小高度保障：给各核心元素设置最小高度，防止缩放后内容被过度压缩导致不可用
5. 间距优化：通过gap和内边距提升布局美观度，避免元素拥挤

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