如何不使用媒体查询，在HTML/CSS中基于元素尺寸选择性隐藏工具栏元素？

需要实现一个自适应工具栏：浏览器窗口缩小时，特定元素完全消失（类似浏览器收藏栏的动态显示效果）。当前示例中，section 2对应的flex项在宽度不足300px时只会缩小，而非隐藏；且希望基于元素自身尺寸实现响应式，媒体查询无法满足需求，询问是否仅用CSS即可实现。

可以通过CSS容器查询实现，它能基于父容器的尺寸而非浏览器视口来控制子元素的显示隐藏，完美匹配你的需求。

最终CSS代码 #

.container{
    flex-wrap: nowrap;
    display: flex;
    justify-content: space-between;
    border: 2px black solid;
    overflow: hidden;
    width: 100%;
    /* 声明容器为查询上下文 */
    container-type: inline-size;
}

div{
    height: 100px;
}

#div1{
    width: 300px;
    background-color:#7fffd4;
    flex-shrink: 0;
}

#div2{
    width: 300px;
    background-color: #ffb6c1;
}

/* 当容器宽度小于600px时，隐藏div2 */
@container (max-width: 599px) {
    #div2 {
        display: none;
    }
}

调整后的HTML代码（替换自定义<container>为标准<div>，避免兼容性问题） #

<body>
    <div class="container">
        <div id="div1">Section 1: this section should always remain visible</div>
        <div id="div2">Section 2: this entire section should disappear when reduced below initial width of 300px</div>
    </div>
</body>

实现逻辑 #

1. 给.container添加container-type: inline-size，将其设置为容器查询的上下文，后续规则将基于该容器的宽度生效。
2. 当容器总宽度小于600px时（#div1固定占300px，剩余空间不足以容纳#div2的300px），通过@container规则将#div2隐藏。
3. 容器查询直接基于父容器尺寸触发，完全满足“基于元素尺寸实现响应式”的要求，无需依赖视口媒体查询。

兼容性备选方案 #

如果需要兼容不支持容器查询的旧浏览器，可以利用flex特性结合min-width实现：

.container{
    flex-wrap: nowrap;
    display: flex;
    border: 2px black solid;
    overflow: hidden;
    width: 100%;
}

#div1{
    width: 300px;
    background-color:#7fffd4;
    flex-shrink: 0;
}

#div2{
    min-width: 300px;
    background-color: #ffb6c1;
    /* 当宽度不足时，将元素挤出可视区域 */
    flex-shrink: 0;
    margin-left: auto;
}

这种方案通过min-width保证#div2不会缩小，当容器宽度不足时，利用overflow: hidden将其隐藏，但视觉效果不如容器查询直观。

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