绝对定位HTML元素触达父容器边缘时被压缩的问题求解

问题根因 #

绝对定位元素虽然脱离了正常文档流，不会影响其他元素的布局，但它的尺寸计算仍然受父级相对定位容器的边界约束：
当你仅为绝对定位元素设置left属性，未显式定义width和right属性时，浏览器会遵循CSS定位规则自动计算元素宽度：可用宽度 = 父容器宽度 - left值 - 元素水平边距/内边距，当left值增大到超过阈值时，计算出的可用宽度会小于元素内容原本需要的宽度，就会出现内容挤压的现象。你提到的translate(-50%, -50%)会提前触发挤压也是这个原因——translate偏移会让元素实际位置提前触碰父容器边界，触发宽度压缩逻辑。

解决方案 #

不需要设置固定宽度，仅需在.node的CSS规则中新增width: fit-content声明即可，该属性会让元素宽度完全由内容撑开，忽略父容器的边界限制，完美适配你需要不同节点自适应内容尺寸的需求。

修改后的.node样式参考：

.node{
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #AAAAFF;
    padding: 4px;
    /* 新增以下规则解决挤压问题 */
    width: fit-content;
    /* 加一行min-width兜底，避免部分场景下仍然被压缩 */
    min-width: fit-content;
}

如果需要兼容非常旧的浏览器版本，也可以把值换成max-content，效果一致。

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