css的left:50%引发的默认宽度50%

发现问题

ui组件库element-plus中的message

.el-message {
    --el-message-min-width: 164px;
    min-width: var(--el-message-min-width);
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
}

此时发现此message最小宽度164px,最大宽度为187.5px就会自动换行了。而187.5px又恰巧是375的50%。

原因是当你设定left: 50%;的时候，由于dom的width的属性，默认是auto，此时width就相当于50%。

例子

看下面的dom:
此时并未设置.blcok的宽度，然而此时的宽度却为50%。

<!-- // test code -->
<div style="width: 375px; height: 200px; position: relative; background-color: aquamarine;">
    <div class="block">
        <span>这个是测试内容这个是测试内容这个是测试内容这个是测试内容这个是测试内容这个是测试内容这个是测试内容这个是测试内容</span>
    </div>
</div>
<style>
.block {
    background-color: burlywood;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
</style>

解决方案

解决方案也很简单，重置掉width: auto;这个默认属性。

例子：添加 width: max-content; , 再加上设置最大宽度max-width: 80%;

over~~~~~~