绝对定位元素的最大宽度受父元素宽度影响失效

代码

.box {
    position: relative;
    margin: 50px;
    width: 150px; height: 200px;
    background-color: #999;
}
.tooltip {
    position: absolute; top: 50px; left: 200px;
    max-width: 200px;
    background-color: #eee;
}

 

<div class="box">
    <div class="tooltip">
        台风路径实时发布系统是由浙江省水利厅、浙江省水利信息管理中心主办的台风信息发布系统,系统提供最新最全的台风信息和台风路径,可及时准确地提供台风的实时信息、预报信息和历史信息,系统同...
    </div>
</div>

如上图所示，我为tooltip元素加了max-width，但并没有生效。

解决方法：

.tooltip {
    position: absolute; top: 50px; left: 200px;
    width: 1366px;
    max-width: 200px;
    background-color: #eee;
}

 

为tooltip元素加上了足够用的宽度 width: 1366px; ，最大宽度生效了。

来源：https://blog.csdn.net/zbailing/article/details/99542717