Html 当我将侧边栏设置为“显示：网格”时，侧边栏中的内容不再随浏览器窗口收缩

在我声明

display:grid

之前，我正在尝试分享我的

问题


*{
框大小：边框框；
字体系列：世纪哥特式；
}
#联系页面{
宽度：80%；
保证金：自动；
边框：2倍纯色灰色；
显示：网格；
网格模板列：1fr；
栅隙：25px；
}
#侧栏{
背景：#CFA5D7；
填充：20px；
颜色：#FFE3EF；
宽度：100%；
}
保险商实验室{
保证金：0；
填充：0；
文本对齐：居中；
列表样式类型：无；
}
a{
文字装饰：无；
颜色：#FFE3EF；
}
#莫鲁{
最大宽度：100%；
边框底部：2px实心#FFE3EF；
}
#消息格式{
填充：20px；
显示：网格；
网格模板柱：1fr 1fr；
栅极间隙：15px；
}
.表格组{
显示：网格；
}
.表格组输入，
#提交{
宽度：100%；
高度：30px；
}
.表格组标签{
宽度：100%；
自我对齐：结束；
}
.形成整个宽度{
格线柱：1/3
}
#信息{
最大宽度：100%；
最小宽度：100%；
宽度：100%；
高度：100px；
}
标签{
边缘底部：5px；
}
@介质（最小宽度：600px）{
#联系页面{
宽度：80%；
保证金：自动；
边框：2倍纯色灰色；
显示：网格；
网格模板列：30%1fr；
栅隙：25px；
}
#侧栏{
背景：#CFA5D7；
填充：20px；
颜色：#FFE3EF；
显示：网格；
网格模板列：1fr；
}
保险商实验室{
保证金：0；
填充：0；
文本对齐：居中；
列表样式类型：无；
}
a{
文字装饰：无；
颜色：#FFE3EF；
}
#莫鲁{
最大宽度：100%；
宽度：100%；
边框底部：2px实心#FFE3EF；
}
#消息格式{
填充：20px；
显示：网格；
网格模板柱：1fr 1fr；
栅极间隙：15px；
}
.表格组{
显示：网格；
}
.表格组输入，
#提交{
宽度：100%；
高度：30px；
}
.表格组标签{
宽度：100%；
自我对齐：结束；
}
.形成整个宽度{
格线柱：1/3
}
#信息{
最大宽度：100%；
最小宽度：100%；
宽度：100%；
高度：100px；
}
标签{
边缘底部：5px；
}
}

与网格的接触形式





名称
视频电话
电子邮件地址
主题
写下你的信息
有人能验证我的解决方案是否正确吗

相反，我为容器设置了一个
minwidth
，当窗口大小降低时，容器中的内容会溢出，如图中所示

通过在容器上设置
minwidth
，内容不会溢出，因为容器不再足够小

起初，我希望能够尽可能地缩小窗口，所有内容都能适应它（这是在我在侧边栏上声明
display:grid
之前的工作方式），但我找不到其他方法来防止声明
display:grid
时发生溢出


*{
框大小：边框框；
字体系列：世纪哥特式；
}
#联系页面{
宽度：80%；
最小宽度：450px；
保证金：自动；
边框：2倍纯色灰色；
显示：网格；
网格模板列：1fr；
栅隙：25px；
}
#侧栏{
背景：#CFA5D7；
填充：20px；
颜色：#FFE3EF；
显示：网格；
网格模板柱：1fr 1fr；
}
保险商实验室{
保证金：0；
填充：0；
文本对齐：居中；
列表样式类型：无；
}
a{
文字装饰：无；
颜色：#FFE3EF；
}
#莫鲁{
最大宽度：100%；
宽度：100%；
最小宽度：150px；
边框底部：2px实心#FFE3EF；
}
#消息格式{
填充：20px；
显示：网格；
网格模板列：1fr；
栅极间隙：15px；
}
.表格组{
显示：网格；
}
.表格组输入，
#提交{
宽度：100%；
高度：30px；
}
.表格组标签{
宽度：100%；
自我对齐：结束；
}
#信息{
最大宽度：100%；
最小宽度：100%；
宽度：100%；
高度：100px；
}
标签{
边缘底部：5px；
}
@介质（最小宽度：700px）{
#联系页面{
宽度：80%；
最小宽度：1040px；
保证金：自动；
边框：2倍纯色灰色；
显示：网格；
网格模板列：30%1fr；
栅隙：25px；
}
#侧栏{
背景：#CFA5D7；
填充：20px；
颜色：#FFE3EF；
显示：网格；
网格模板列：1fr；
}
保险商实验室{
保证金：0；
填充：0；
文本对齐：居中；
列表样式类型：无；
}
a{
文字装饰：无；
颜色：#FFE3EF；
}
#莫鲁{
最大宽度：100%；
宽度：100%；
边框底部：2px实心#FFE3EF；
}
#消息格式{
填充：20px；
显示：网格；
网格模板柱：1fr 1fr；
栅极间隙：15px；
}
.表格组{
显示：网格；
}
.表格组输入，
#提交{
宽度：100%；
高度：30px；
}
.表格组标签{
宽度：100%；
自我对齐：结束；
}
.形成整个宽度{
格线柱：1/3
}
#信息{
最大宽度：100%；
最小宽度：100%；
宽度：100%；
高度：100px；
}
标签{
边缘底部：5px；
}
}

与网格的接触形式





名称
视频电话
电子邮件地址
主题
写下你的信息
您已将
网格模板列中的额外空间设置为30%：30%1fr
。你想得到什么结果？布局应该是不变的吗？当窗口最大化时，30%用于侧边栏，而1fr用于输入字段。我想实现prntscr.com/10ii5iv，其中边栏中的内容可以自动调整。这张截图是在我将侧边栏设置为显示：grid之前拍摄的。W