Shrink fitting a div that has a max-width

Question

I need to shrink fit a parent to fit a child div that itself has a max-width set.

The problem is that once the child's content overflows onto multiple lines it's width is set to it's max width, even though it doesn't need to be that wide. Here, I want the gray outer box to fit the contents exactly.

Here's the code:

<div class="tags">
    <ul>
        <li>One
        <li>Two
        <li>Three
        <li>Four
    </ul>
</div>

.tags {
    max-width: 190px;
    background: #AAA;
}

.tags ul {
    list-style-type: none;
    padding: 0;
    text-align: right;
}

.tags li {
    display: inline-block;
    margin-bottom: 5px;
    margin-right: 5px;
    padding: .2em .6em .3em;
    font-size: 20px;
    font-weight: bold;
    line-height: 1;
    color: #ffffff;
    text-align: center;
    border-radius: .25em;
    background-color: #579cc1;
}

I have a fiddle here:

http://jsfiddle.net/yw75kg15/

Anyone have a solution to this?

Answer 1

It looks like all you need to do is specify a width in the li block with an auto margin and percent margin to the right. The width should fix the problem. Try putting that in your fiddle.

.tags li {
    display: inline-block;
    width:30%;
    margin-left: auto;
    margin-right: 5%;
    margin-bottom: 5px;
    padding: .2em .6em .3em;
    font-size: 20px;
    font-weight: bold;
    line-height: 1;
    color: #ffffff;
    text-align: center;
    border-radius: .25em;
    background-color: #579cc1;
}