在绝对位置容器中将文本包装为最大宽度

Question

我使用一些文本构建绝对位置容器，最大宽度为200px，所以文本应该包装到200px，但它不起作用。

我无法设置固定的宽度，因为如果文字较短，应该更小。

容器的相对位置父级为“display：inline;”风格，（这种风格造成了问题）。

如何让文字较长的容器填充200px？

这是小提琴：https://jsfiddle.net/m2wr9m06/3/

.showlist { 
 
    box-shadow: 5px 5px 20px #191919; 
 
    padding: 5px; 
 
    max-width: 200px; 
 
    position: absolute; 
 
    z-index: 1; 
 
    left: -5px; 
 
    font-family: "Century Gothic", Century, "Arial Black"; 
 
    font-size: 14px; 
 
} 
 
.flag { 
 
    color: #FF9900; 
 
    position: relative; 
 
    display: inline-block; /* remove this rule to see the expected result */ 
 
    margin: 5px; 
 
    font-size: 16px; 
 
}

<div class="flag"> 
 
    <div class="showlist" > 
 
    <div>asdf 4444 555555 666666 7 8 8888 9999 555 444</div> 
 
    <div>4 8 15 16 23 42</div> 
 
    <div>asdf foo bar </div> 
 
    </div> 
 
</div>

（删除 “dispay：内联;” 治看到预期的结果）

Answer 1

我找到了一个解决方案，我希望它可以帮助别人，我增加了一个额外的容器为200px;宽度：

<div class="flag"> 
<div style='width:200px;'> 
    <div class="showlist" > 
    <div>asdf 4444 555555 666666 7 8 8888 9999 555 444</div> 
    <div>4 8 15 16 23 42</div> 
    <div>asdf foo bar </div> 
    </div> 
</div> 
</div> 

小提琴：https://jsfiddle.net/m2wr9m06/8/

Answer 2

上.flag更换display:inline与display:inline-block。

.flag { color:#FF9900; position:relative; display:inline-block; margin:5px; font-size:16px; }

Answer 3

相反的max-width:200px，将其更改为width:200px;