HTML Question
CSS - Wrap text to max-width in an absolute position container
I am building an absolute position container with some texts, max-width is 200px, so text should wrap until 200px, but it's not working.
I can not set a fixed width because should be smaller if text is shorter.
Container has a relative position parent with "display: inline;" style, (this style is causing the problem).
How can I make the container fill the 200px if text is longer?
This is the fiddle: 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; /* 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>
(remove "dispay:inline;" rule to see the expected result)
Answer Source
Replace display:inline with display:inline-block on .flag.
.flag {
color:#FF9900;
position:relative;
display:inline-block;
margin:5px;
font-size:16px;
}