Html 如何调整图元的大小并占用所有剩余空间？

我有一个有3个部分的网格。我想要的是中间的“地图”部分可以调整大小，当它变小时，“点”部分将展开以占据所有剩余空间

#网格{
显示：网格；
网格模板行：1fr 6fr 2fr；
网格模板区域：
“滑块”
“地图”
“点数”；
宽度：200px；
高度：计算（100vh-10px）；
}
.一{
网格区域：滑块；
背景颜色：黄色；
}
.三{
网格区域：点；
背景颜色：绿色；
}
resizeme先生{
网格区域：地图；
调整大小：垂直；
溢出：自动；
背景颜色：橙色；
}

你好
你可以调整我的尺寸
三

使用

auto

而不是

fr

测量可重新调整尺寸的元件的高度。然后，如果需要，在项目本身上设置最小高度

#网格{
显示：网格；
网格模板行：1fr auto 2fr；
网格模板区域：“滑块”“贴图”“点”；
宽度：200px；
高度：计算（100vh-10px）；
}
.一{
网格区域：滑块；
背景颜色：黄色；
}
.三{
网格区域：点；
背景颜色：绿色；
}
resizeme先生{
网格区域：地图；
调整大小：垂直；
溢出：自动；
背景颜色：橙色；
/*最小高度：50px*/
}

你好
你可以调整我的尺寸
三

使用

auto

而不是

fr

测量可重新调整尺寸的元件的高度。然后，如果需要，在项目本身上设置最小高度

#网格{
显示：网格；
网格模板行：1fr auto 2fr；
网格模板区域：“滑块”“贴图”“点”；
宽度：200px；
高度：计算（100vh-10px）；
}
.一{
网格区域：滑块；
背景颜色：黄色；
}
.三{
网格区域：点；
背景颜色：绿色；
}
resizeme先生{
网格区域：地图；
调整大小：垂直；
溢出：自动；
背景颜色：橙色；
/*最小高度：50px*/
}

你好
你可以调整我的尺寸
三

是否允许使用任何JavaScript？如果是，这是一个好的开始吗？

doDrag

可以被覆盖，并扩展上面/下面的部分。是否允许任何JavaScript？如果是，这是一个好的开始吗？

doDrag

可以被覆盖并扩展上/下部分