How to resize the div when the span inside div is wrapped?

Question

Currently I have a div which has a max-width:200px, inside the div there are some spans with a property white-space:nowrap and display: inline-block.

.a {
  max-width:200px;
}

.b {
 display: inline-block; 
 white-space:nowrap;
}

<div class="a">
 <span class="b">A</span> <span class="b">B</span>
 <span class="b">C</span>
</div>

The current behavior is that when the length of span A and span B is over the max-width of div, span B is wrapped into next line.

<div class="a">
 <span class="b">A</span> Empty space here
 <span class="b">B</span> Empty space here
 <span class="b">C</span> Empty space here
</div>

However, the width of div is not resized corresponding to the length of the span. It always has a width of 200px which causes the problem that there are empty space after span.

What I want is to make sure the div resize by the length of the span, without any empty space.

Anyone can help me with this? I'm not asking for an answer directly. Some explanation would be better.

Answer 1

Using max-width will not allow the div to be wider than given value (200px in this case) using min-width instead of max-width might help you...