设置div.filter宽度为0px时容器高度升高，如何通过overflow:hidden隐藏内容

你遇到的容器变高问题是因为内部行内排列的li元素和图标在容器宽度不足时自动换行，导致容器高度被换行后的内容撑开，仅设置overflow: hidden只能隐藏超出宽度的内容，无法解决高度被撑高的问题。

你只需要调整CSS新增两个配置即可解决：

• 给内部ul设置white-space: nowrap，强制所有行内元素在同一行排列，不会因为宽度不足折行
• 给.filter容器设置固定高度，和展开状态的高度一致，避免高度随内容自适应变化

修改后的完整CSS代码如下：

.filter {
    margin: 1px 0 1px 0;
    width: 40%;
    background-color:red;
    overflow:hidden;
    /* 新增：固定高度，匹配原有展开状态的高度 */
    height: 50px;
    /* 可选：添加宽度过渡动画，切换更平滑 */
    transition: width .3s ease;
}
.filter ul {
    padding-left:8px;
    /* 新增：强制内部行内内容不换行 */
    white-space: nowrap;
    /* 新增：清除ul默认上下边距，避免高度偏移 */
    margin: 0;
}

.filter-icon {
    display: inline-block;
    fill: currentColor;
    stroke: currentColor;
    vertical-align: middle;
    transition: transform .5s;
    height:16px; width:16px;
}

.filter-icon:hover {
    fill: var(--orange);
    stroke: #000;
    transform:rotate(180deg);
}

.filter ul li {
    display:inline-block;
    padding:15px;
    position:relative;
}

.filter:hover {
    width:50px;
}

修改完成后，你可以通过以下JS代码将容器宽度设为0，内容会被完全隐藏，不会出现高度变化的问题：

document.querySelector('.filter').style.width = '0px';

内容的提问来源于stack exchange，提问作者hamburger