html - Anonymous text block width for inline-block elements -

i trying make width of container div dynamically collapse onto inline-block contents. can determine imposible per 9.4.2 inline formatting contexts

in general, left edge of line box touches left edge of containing block , right edge touches right edge of containing block. however, floating boxes may come between containing block edge , line box edge. thus, although line boxes in same inline formatting context have same width (that of containing block), may vary in width if available horizontal space reduced due floats.

the problem anonymous text blocks assume width of container.

i want internal elements respond width this...

var democontainer = d3.select('#democontainer').style('width', '200px');  function tick() {  	democontainer.transition().duration(3000).style('width', '300px')  	.transition().duration(2000).style('width', '300px')  	.transition().duration(3000).style('width', '550px')  	.transition().duration(3000).style('width', '300px')  	.transition().duration(2000).style('width', '300px')  	.transition().duration(3000).style('width', '100px')  	.each('end', tick);  };  tick();

#htmldiv {        font-family: 'helvetica neue', helvetica, 'segoe ui', arial, freesans, sans-serif;        font-size: 12px;        outline: solid 1px black;        background-color: rgba(0, 0, 0, 0.25);        display: inline-block;        box-sizing: border-box;      }        .container,      #bubble-wrapper {        height: auto;        position: relative;        display: inline-block;        margin: 5px;        background-color: rgba(0, 38, 255, 0.25);        outline: solid 1px white;        text-align: left;      }        .bubbles {        color: #ccc;      }        .select-bubbles,      .bubbles {        padding: 5px;        margin: 5px;        outline: solid 1px white;        background-color: rgb(114, 114, 114);        width: 100px;        display: inline-block;      }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>  <div id="democontainer" style="outline: solid 3px red; padding: 10px">      <div id="htmldiv">        <div class="container">          display: inline-block;          <br>position: relative;          <br />          <div class="select-bubbles">            inline-block          </div>        </div>        <br>        <div id="bubble-wrapper">          display: inline-block;          <br>position: relative;          <br>          <div class="bubbles bubble1">            inline-block          </div>          <div class="bubbles bubble2">            inline-block          </div>          <div class="bubbles bubble2">            inline-block          </div>        </div>      </div>    </div>

but need container shrink-wrap inner divs...

this fine

, this

not i'm looking for...

have correctly understood spec , if there way achieve i'm looking for?

update pointed out @alohci more important reference

10.3.9 'inline-block', non-replaced elements in normal flow

if 'width' 'auto', used value shrink-to-fit width floating elements.

you've correctly understood consequence of spec, though imho you've not quoted critical part. that's shrink-to-fit algorithm, says:

... calculate preferred width formatting content without breaking lines other explicit line breaks occur, , calculate preferred minimum width, e.g., trying possible line breaks. ... thirdly, find available width: in case, width of containing block minus used values of 'margin-left', 'border-left-width', 'padding-left', 'padding-right', 'border-right-width', 'margin-right', , widths of relevant scroll bars.

then shrink-to-fit width is: min(max(preferred minimum width, available width), preferred width).

which resolves available width, not minimum width "can't shrink wrap" case.

unfortunately, css uses algorithm widely, alternative layouts floating boxes, have same problem.