Html 如何增加元素'；当滚动条出现时自动调整宽度？

当用户减少浏览器宽度时，我会制作一个迷你侧边栏。当我使用

height

css属性时，我被卡住了。我允许用户滚动侧边栏

但我不知道如何在垂直滚动条出现时自动增加侧边栏的宽度

/*开始-引导*/
。未设置样式的列表{
左侧填充：0；
列表样式：无；
}
m-auto{
保证金：自动；
}
.文字灯{
颜色：rgb（248249250）；
}
.文本中心{
文本对齐：居中；
}
.p-3{
填充：1rem！重要；
}
/*端引导*/
.侧边栏中{
溢出x：隐藏；
溢出y：自动；
显示：块；
排名：0；
底部：0；
宽度：60px；
位置：固定；
背景图像：线性渐变（向右，#ff758c 0%，#ff7eb3 100%）；
}
李{
光标：指针；
用户选择：无；
字体大小：20px；
}
李：悬停{
背景：rgba（255，255，255，0.4）；
}
.阿凡达{
宽度：30px；
高度：30px；
背景尺寸：30px 30px；
剪辑路径：多边形（50%0%、90%20%、100%60%、75%100%、25%100%、0%60%、10%20%）；
}

您可以始终使用

：-webkit滚动条

，以获得更好的视觉效果：

/*开始-引导*/
。未设置样式的列表{
左侧填充：0；
列表样式：无；
}
m-auto{
保证金：自动；
}
.文字灯{
颜色：rgb（248249250）；
}
.文本中心{
文本对齐：居中；
}
.p-3{
填充：1rem！重要；
}
/*端引导*/
.侧边栏中{
溢出x：隐藏；
溢出y：自动；
显示：块；
排名：0；
底部：0；
宽度：60px；
位置：固定；
背景图像：线性渐变（向右，#ff758c 0%，#ff7eb3 100%）；
}
李{
光标：指针；
用户选择：无；
字体大小：20px；
}
李：悬停{
背景：rgba（255，255，255，0.4）；
}
.阿凡达{
宽度：30px；
高度：30px；
背景尺寸：30px 30px；
剪辑路径：多边形（50%0%、90%20%、100%60%、75%100%、25%100%、0%60%、10%20%）；
}
：-webkit滚动条{
宽度：2倍；
}
：-webkit滚动条拇指{
背景颜色：灰色；
边界半径：5px；
}

您可以始终使用

：-webkit滚动条

，以获得更好的视觉效果：

/*开始-引导*/
。未设置样式的列表{
左侧填充：0；
列表样式：无；
}
m-auto{
保证金：自动；
}
.文字灯{
颜色：rgb（248249250）；
}
.文本中心{
文本对齐：居中；
}
.p-3{
填充：1rem！重要；
}
/*端引导*/
.侧边栏中{
溢出x：隐藏；
溢出y：自动；
显示：块；
排名：0；
底部：0；
宽度：60px；
位置：固定；
背景图像：线性渐变（向右，#ff758c 0%，#ff7eb3 100%）；
}
李{
光标：指针；
用户选择：无；
字体大小：20px；
}
李：悬停{
背景：rgba（255，255，255，0.4）；
}
.阿凡达{
宽度：30px；
高度：30px；
背景尺寸：30px 30px；
剪辑路径：多边形（50%0%、90%20%、100%60%、75%100%、25%100%、0%60%、10%20%）；
}
：-webkit滚动条{
宽度：2倍；
}
：-webkit滚动条拇指{
背景颜色：灰色；
边界半径：5px；
}

一种可能的解决方案是查询

高度

@media (max-height: 570px) { /* this is when the scrollbar appears */
    .sidebar-medium {
        width: 100px;
    }
}


。未设置样式的列表{
左侧填充：0；
列表样式：无；
}
m-auto{
保证金：自动；
}
.文字灯{
颜色：rgb（248249250）；
}
.文本中心{
文本对齐：居中；
}
.p-3{
填充：1rem！重要；
}
/*端引导*/
.侧边栏中{
溢出x：隐藏；
溢出y：自动；
显示：块；
排名：0；
底部：0；
宽度：60px；
位置：固定；
背景图像：线性渐变（向右，#ff758c 0%，#ff7eb3 100%）；
过渡：宽度0.3s；
}
李{