带调整大小手柄的Grid布局：元素无法超出初始尺寸问题

问题出在网格行的单位使用上：当用fr分配行高时，一旦upperpanel被拖动调整尺寸，网格行的高度会被锁定为当前像素值，导致lowerpanel的高度被限制在初始的5fr对应的空间内，无法扩展。

以下是修复后的代码：

* {
  box-sizing: border-box;
  font-family: sans-serif;
}

body {
  margin: 0;
  height: 100%;
}

thegrid {
  height: 100vh;
  display: grid;
  /* 改为auto让第一行高度由元素自身控制，第二行占剩余空间 */
  grid-template-rows: auto 1fr min-content;
  grid-gap: 0;
}

upperpanel {
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 50px;
  resize: vertical;
  border: 3px dotted red;
  background-color: antiquewhite;
  /* 限制最大高度，避免覆盖状态栏，数值可根据状态栏实际高度调整 */
  max-height: calc(100vh - 24px);
}

lowerpanel {
  overflow-x: hidden;
  overflow-y: auto;
  text-align: left;
  border: 0;
  padding: 5px;
  background-color: lightsteelblue;
  display: grid;
  grid-gap: 0;
  grid-template-columns: 100px 1fr;
}

statusbar {
  padding: 2px;
  font-size: 10px;
  font-style: italic;
  background-color: lightgray;
}

<thegrid>

  <upperpanel>
    Some things go here.
  </upperpanel>

  <lowerpanel>
    <div>
      Some<br>stuff<br>in<br>here.
    </div>
    <div>
      This is the main output area.
      <p>
      Now the lower panel can grow back to full size when upper panel is resized smaller.
    </div>
  </lowerpanel>

  <statusbar>
    Some other stuff goes in here.
  </statusbar>

</thegrid>

关键修改说明 #

• 网格行定义改为auto 1fr min-content：第一行高度完全由upperpanel的resize和内容决定，第二行会自动填充剩余的可用空间，不会被初始的比例限制
• 给upperpanel添加max-height：防止拖动时把面板拉得过高，覆盖底部的状态栏，确保整体布局始终在视口范围内

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