在絕對位置容器中將文本包裝爲最大寬度

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;