我在一个按钮内有一个跨度，其位置为相对位置。
.button-class {
width: 50px;
height: 50px;
position: relative;
background-color: blue;
}
.span-class {
position: absolute;
padding: 5px;
background-color: red;
color: white;
max-width: 120px;
margin-left: -20px; // This will be calculated using JS. Shoudl be (width of span-class / 2)
bottom: 100%;
left: 50%;
}
<button class="button-class">
Button Text
<span class="span-class">Span class text. More text.</span>
</button>
跨度与按钮顶部对齐。
应该发生的是跨度级宽度应该根据其内容增长，直到它达到最大宽度120px然后分成新行。但由于父级设置为相对，因此它只占父级宽度50px。
如何使位置绝对元素符合其内容而不是将其宽度限制为父级？
我要问的是我不想在位置绝对元素上使用固定宽度。