基于W3-CSS网格实现80vh容器内两行自适应布局问题

针对你遇到的第一列两行因最小vh高度限制导致溢出80vh容器的问题，可通过调整网格行的高度定义来解决，完全保留网格布局且不放弃vh单位：

核心方案 #

利用CSS Grid的minmax()函数结合calc()，让两行在满足最小vh高度的同时，自动适配容器剩余空间，避免溢出。

代码实现 #

假设你的HTML结构如下：

<div class="grid-container">
  <div class="col1">
    <div class="row1"><!-- Plotly SVG 内容 --></div>
    <div class="row2"><!-- Plotly SVG 内容 --></div>
  </div>
  <div class="col2"><!-- 第二列内容 --></div>
</div>

对应的CSS设置：

.grid-container {
  height: 80vh;
  display: grid;
  grid-template-columns: 1fr 1fr; /* 两列均分宽度 */
  /* 若列之间需要间距，可添加 gap: 16px; */
}

.col1 {
  display: grid;
  /* 定义两行：最小高度为你需要的vh值，最大高度为容器高度减去间距后均分 */
  grid-template-rows: 
    minmax(30vh, calc((100% - 16px) / 2)) 
    minmax(30vh, calc((100% - 16px) / 2));
  gap: 16px; /* 两行固定间距16px */
  height: 100%; /* 占满父容器的80vh高度 */
}

.row1, .row2 {
  /* 保留Plotly所需的样式，min-height已通过grid-template-rows的minmax实现 */
}

方案说明 #

1. minmax(XXvh, calc((100% - 16px)/2))：当两行最小高度（XXvh*2）加16px间距未超过80vh时，行高保持XXvh；当总和超过容器高度时，自动将行高调整为(80vh-16px)/2，刚好填满第一列，不会溢出。
2. 无需转换单位：16px间距保持固定值，不用转vh，避免不同分辨率下的适配问题。
3. 兼容Plotly要求：完全保留了vh单位的最小高度设置，满足SVG生成器的限制。

兜底优化（可选） #

若极端场景下仍有溢出风险，可给.col1添加overflow: auto;，让内部内容可滚动，同时保持容器边界不变：

.col1 {
  /* 其他样式不变 */
  overflow: auto;
}

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