如何避免CSS边框导致div收缩？模态对话框内容适配方案

点击「Open」按钮打开对话框时，内容不会出现收缩；但点击「Open Modal」按钮打开模态对话框时，内容发生了收缩。需要一种通用方案解决该问题，不希望为对话框内每个元素添加white-space: nowrap;或其他属性，要求模态对话框的表现与非模态对话框一致。

注：当前正在为dialog元素做兼容降级方案，因此无法直接使用dialog元素，且理想情况下不添加额外标记。

复现代码 #

HTML #

<div class="dialog" id="dialog">
  <p>This is my dialog box</p>
  <button id="close">Close</button>
</div>

<button id="open">Open</button>

<button id="openModal">Open Modal</button>

CSS #

.dialog {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: salmon;
    padding: 1rem;
}
.dialog.modal {
    border-width: max(100vh, 100vw);
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.3);
    background-clip: padding-box;
    backdrop-filter: blur(2px);
}
.dialog.open {
    display: block;
}

JavaScript #

const dialog = document.getElementById("dialog");

document.getElementById("open").addEventListener("click", () => {
    dialog.classList.add("open");
});

document.getElementById("openModal").addEventListener("click", () => {
    dialog.classList.add("open", "modal");
});

document.getElementById("close").addEventListener("click", () => {
    dialog.classList.remove("open", "modal");
});

问题根源在于.dialog.modal中设置的超大border-width——元素的总宽度是「内容宽度 + padding + border」，当border尺寸达到max(100vh, 100vw)时，内容区域会被挤压到最小，导致收缩。

改用伪元素实现遮罩是最通用的方案，不会影响原对话框的尺寸计算，也不需要额外标记：

修改后的CSS代码：

.dialog {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: salmon;
    padding: 1rem;
    z-index: 1001; /* 确保对话框在遮罩上层 */
}
/* 用伪元素生成全屏遮罩 */
.dialog.modal::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(2px);
    z-index: -1; /* 让遮罩在对话框后方 */
}
.dialog.open {
    display: block;
}

核心逻辑 #

• 伪元素独立于对话框本身的尺寸计算，不会挤压内容区域
• 遮罩层设置全屏覆盖，通过z-index确保在对话框下方，不干扰交互
• 对话框的定位和尺寸逻辑完全保留，和非模态状态表现一致

这样修改后，模态对话框的内容就不会再收缩，完全匹配非模态对话框的显示效果，同时满足兼容降级、无额外标记的要求。

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