Html 如何使div适当地膨胀和收缩？

我的应用程序应该有一个侧菜单，用来导航不同的猫。 当用户单击侧菜单中的一个按钮时，应用程序应该显示所选类别，但我不知道如何显示所选类别。 当我打开侧菜单时，侧菜单旁边的区域也应该调整大小 以下是我目前掌握的代码：

@导入url(https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
}
@导入url(https://fonts.googleapis.com/css?family=Titillium+网页:300),；
.主货柜{
显示器：flex；
弯曲方向：行；
}
.菜单容器{
身高：100%；
宽度：50%；
}
.区域集装箱{
身高：100%；
宽度：50%；
}
.fa-2x{
字号：2em；
}
法兰西{
位置：相对位置；
显示：表格单元格；
宽度：60px；
高度：36px；
文本对齐：居中；
垂直对齐：中间对齐；
字体大小：20px；
}
.主菜单：悬停，导航。主菜单。展开{
宽度：250px；
溢出：可见；
}
.主菜单{
背景:#212121 ;；
/*右边框：1px实心#e5*/
位置：绝对位置；
排名：0；
底部：0；
身高：100%；
左：0；
宽度：60px；
溢出：隐藏；
-webkit过渡：宽度.05s线性；
过渡：宽度.05s线性；
-webkit变换：translateZ（0）尺度（1,1）；
z指数：1000；
}
.主菜单>ul{
边际：7px0；
}
.主菜单李{
位置：相对位置；
显示：块；
宽度：250px；
}
.主菜单li>a{
位置：相对位置；
显示：表格；
边界塌陷：塌陷；
边界间距：0；
颜色：#999；
字体系列：arial；
字体大小：14px；
文字装饰：无；
-webkit变换：translateZ（0）尺度（1,1）；
-webkit转换：所有.1s线性；
过渡：所有。1s线性；
}
.主菜单.导航图标{
位置：相对位置；
显示：表格单元格；
宽度：60px；
高度：36px；
文本对齐：居中；
垂直对齐：中间对齐；
字号：18px；
}
.主菜单.导航文本{
位置：相对位置；
显示：表格单元格；
垂直对齐：中间对齐；
宽度：190px；
字体系列：“titilliumweb”，无衬线；
}
.主菜单>ul.注销{
位置：绝对位置；
左：0；
底部：0；
}
.无需触摸。可滚动。悬停{
溢出y：隐藏；
}
.无需触摸。可滚动。悬停：悬停{
溢出y：自动；
溢出：可见；
}
a:悬停，a:聚焦{
文字装饰：无；
}
导航{
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
-o-用户选择：无；
用户选择：无；
}
导航ul，导航li{
大纲：0；
保证金：0；
填充：0；
}
.main menu li:hover>a，nav.main-menu li.active>a、.dropdown menu>li>a:hover、.dropdown menu>li>a:focus、.dropdown menu>.active>a:hover、.dropdown menu>.active>a:focus、.dropdown menu>a.active>a:focus{
颜色：#fff；
背景色：#5fa2db；
}
.区域{
背景：#E2；
宽度：100%；
身高：100%；
}
@字体{
字体系列：“titilliumweb”；
字体风格：普通；
字体大小：300；
src:local（'Titillium WebLight'）、local（'Titillium WebLight'）、url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v2/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff)格式（“woff”）；
}

订阅Technoblade

css部分，第2行，您有一个额外的

}

。顺便说一句，为了确保我正确理解你的问题，你想让

区域容器

div随着菜单的扩展而调整大小吗？@need\u to\u know\u现在是的，这就是我想要的。但是这会破坏用户界面，它会将所有内容压缩到一个更小的区域。@need\u to\u know\u现在老实说，我对这两个都很好，只要有效。我正计划让不同类别的内容可以调整大小，但如果可以的话，我会接受的