CSS - Wrap text to max-width in an absolute position container

Question

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 1

Replace display:inline with display:inline-block on .flag.

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

CSS - Wrap text to max-width in an absolute position container

Sign up