css 左右布局之优雅隐藏右侧面板
在 css 布局中，实现左右并列布局是常见需求。但当需要隐藏右侧面板时，又不想其内容受到挤压，该如何操作呢？
समस्या
如下 vue 代码所示，右侧面板的宽度在缩小时，其内容也会随之挤压：
立即学习“前端免费学习笔记（深入）”；
隐藏右侧区块后，这些内容怎么不隐藏，还会受到挤压？
解决办法
要解决此问题，关键在于在不压缩右侧面板内容的情况下，改变外层宽度。
使用 white-space: nowrap 可以禁止子元素换行，从而实现上述目的。具体操作如下：
- 套一层 div
在右侧面板内套一层 div，用于包裹需要保持不被挤压的内容。
...
- 内外层设置样式
设置外层 div 宽度为 350px，高 100%，overflow 为 hidden。内层 div 采用绝对定位，且宽高均为 100%，设置 white-space 为 nowrap。
.detail-area{
width: 350px;
height: 100%;
background: $bg-block;
transition: all $delay;
margin-left: 2px;
box-sizing: border-box;
display: flex;
position: relative;
&.closed{
width: 0;
}
.detail-content{
padding: 10px;
box-sizing: border-box;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
white-space: nowrap;
}
}采用这种方式，右侧面板内的内容不会在宽度改变时受到影响，从而实现优雅隐藏。
