Html 当a<；部门>；扩展它'；s宽度我想要另一个<；部门>；（位于第一个<；div>；旁边）以将其最小化&x27；s宽度

我有两个div，一个位于左侧，另一个位于右侧，紧挨着另一个div。如图所示：

然后，当我打开一个文件夹，文件夹div的宽度增加时，我希望放置在另一个div旁边的div减小它的宽度，这样它们就不会相互堆叠。如图所示：

*{
字体大小：20px；
}
.类型图标{
颜色：#999；
右边距：5px；
}
.内容{
显示：网格；
}
.侧导航{
身高：100%；
最小宽度：6%；
宽度：自动；
位置：绝对位置；
z指数：1；
排名：0；
左：0；
溢出：隐藏；
填充顶部：20px；
边界半径：10px；
边框：浅灰色实心3px；
左边距：10px；
利润上限：110像素；
右边填充：32px；
左侧填充：15px；
}
.内容页{
左边距：20px；
位置：绝对位置；
}
.文件夹标题{
边框：黑色实心3px；
边界半径：10px；
左缘：9%；
宽度：自动；
利润上限：110像素；
高度：50px；
宽度：90%；
位置：相对位置；
浮动：左；
}

{{node.type=='file'？'description'：'folder'}
{{node.name}
{{treeControl.isExpanded（节点）？'expand_more'：'chevron_right'}
{{node.type=='file'？'description'：'folder'}
{{node.name}

摆脱绝对定位，改用flex或grid。