纯CSS如何实现设置resize属性的元素在窗口缩小时跟随缩小？

核心原因 #

你遇到的问题来自两个默认规则的限制：

• Grid布局的子元素默认min-width: auto，优先级高于max-width配置，会强制元素至少保持自身内容宽度，容器缩小时不会触发收缩
• resize: both会在元素上写入内联width/height样式，优先级高于CSS类中的宽度定义，拖拽后的宽度会固定为内联值，没有额外配置时不会跟随容器自适应

完整修改代码 #

<section class="page">
    <article class="resizeFrame">
        <iframe class="iFrame"></iframe>
    </article>
</section>

<style>
    .page{
        display: grid;
        width: 100%;
        height: auto;
        /* 新增：解除Grid默认最小宽度限制 */
        min-width: 0;
    }

    .resizeFrame{
        grid-area: 1/1/2/2;
        display: grid;
        place-self: center;
        /* 修正笔误：原autoflow是无效属性，替换为overflow */
        overflow: hidden;
        resize: both;
        box-sizing: border-box;
        border: 2px solid #000;
        /* 替换原width和max-width，三个参数分别是最小宽度、默认宽度、最大宽度 */
        width: clamp(300px, 600px, 98%);
        /* 新增：允许元素收缩到clamp设置的最小宽度 */
        min-width: 0;
        height: 400px;
        /* 按需添加高度自适应逻辑
        min-height: 0;
        height: clamp(200px, 400px, 90vh);
        */
    }

    .iFrame{
        grid-area: 1/1/2/2;
        width: 100%;
        height: 100%;
        border: none;
        overflow: hidden;
    }
</style>

效果说明 #

修改后你仍然可以自由拖拽调整元素尺寸，放大时最大宽度不会超过98%，窗口缩小时元素会自动收缩到当前视口的98%宽度，不会触发横向滚动条，窗口放大后会恢复到你之前拖拽调整的宽度值。如果不需要限制最小宽度，可以把clamp的第一个参数改为0即可。

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