通过溢出隐藏实现动态隐藏侧边栏而不影响内容
在页面左右布局设计中，我们经常会遇到需要隐藏右侧次要面板的情况。传统的实现方式是通过改变右侧面板的宽度来达到隐藏效果，但这样会导致右侧内容受到挤压。
为了解决这一问题，我们可以使用 css 中的溢出隐藏属性（overflow: hidden）。具体操作如下：
- 为右侧面板添加溢出隐藏属性
在 css 代码中，为需要隐藏的右侧面板添加 overflow: hidden 属性。这将阻止右侧内容在宽度减少时挤压到主面板中。
立即学习“前端免费学习笔记（深入）”；
- 添加一个包裹右侧内容的内层 div
在右侧面板内，再创建一个 div 并包裹需要显示的内容。为该 div 添加以下样式：
white-space: nowrap;
这个样式将取消换行，强制右侧内容全部显示在一行上。
- 调整外层 div 的宽度
当需要隐藏右侧面板时，可以修改外层 div 的宽度。此时，由于内层 div 的 white-space: nowrap 属性，右侧内容将不会受到影响，而是保持在一条线上显示。
示例代码
.about {
height: 100%;
width: 100%;
display: flex;
}
.lft,
.rht {
height: 100%;
}
.lft {
flex: 1;
background: #e3e3e3;
}
.rht {
transition: all 3s;
width: 400px;
background: rgb(201, 186, 186);
}
.rht-content {
white-space: nowrap;
}
.closed {
overflow: hidden;
width: 0;
}通过这种方法，我们可以通过改变右侧面板的宽度来动态隐藏它，而不会影响右侧内容的显示效果，从而实现交互和美观的页面布局。
