为何left+transform居中后容器文本自动换行？求解决办法

参考HTML代码：

<div id="container1">
    <span>Container 1 textNotWrapped</span>
</div>

<div id="container2">
    <span>Container 2 textWrapped</span>
</div>

container2采用绝对定位，初始CSS如下：

#container2 { 
    position: absolute;
    min-width: 50%;
    max-width: 90%;
    border: 1px solid grey;
    font-size: 3rem;
    text-align: center;
}

为实现水平居中，给container2添加了以下CSS：

#container2 {
    transform: translate(-50%, 0);
    bottom: 20%;
    left: 50%;  
}

明明有足够空间显示单行文本，container2内的文本却自动换行了。需求是仅当内容宽度超过max-width: 90%时才让文本换行，求原因及解决办法。

当使用left: 50% + transform: translate(-50%, 0)实现绝对定位元素居中时，元素的宽度计算逻辑会被限制：
绝对定位元素若只设置left而未设置right，其最大可用宽度为包含块宽度减去left值（这里包含块是视口）。设置left: 50%后，元素的最大可用宽度被限制为视口的50%，此时即使你设置了max-width: 90%，也会因为50% < 90%而失效。如果文本在50%视口宽度下无法单行容纳，就会触发换行，这就是问题所在。

以下两种方案都能实现需求，让元素在min-width和max-width范围内自适应宽度，仅当内容超过max-width时换行：

方案1：利用margin:auto + 左右边界定位 #

移除left:50%和transform，改用left:0、right:0配合margin:0 auto实现居中。这种方式下，元素会在0到100%视口宽度范围内，根据内容和min/max-width自动调整宽度，max-width:90%会正常生效：

#container2 { 
    position: absolute;
    min-width: 50%;
    max-width: 90%;
    border: 1px solid grey;
    font-size: 3rem;
    text-align: center;
    bottom: 20%;
    left: 0;
    right: 0;
    margin: 0 auto;
}

方案2：设置width: fit-content #

保留left:50%和transform，添加width: fit-content让元素宽度优先适配内容，同时受min-width和max-width约束：

#container2 {
    position: absolute;
    min-width: 50%;
    max-width: 90%;
    width: fit-content;
    border: 1px solid grey;
    font-size: 3rem;
    text-align: center;
    bottom: 20%;
    left: 50%;
    transform: translate(-50%, 0);
}

width: fit-content会让元素宽度刚好容纳内容，min-width保证元素至少占50%视口宽度，max-width限制最大宽度，当内容超过90%时自动换行，主流浏览器均支持该属性。

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