Anonymous text block width for inline blocks
I am trying to have the container div's width dynamically collapse to its inline-block content. From what I can determine, this is not possible for 9.4.2 Inline Formatting Contexts
In general, the left edge of a line of a line touches the left edge of its containing block, and the right edge touches the right edge of its containing block. However, floating boxes can be between the edge of the containing block and the edge of the line box. Thus, while line boxes in the same formatting context generally have the same width (block size), they can vary in width if the available horizontal space is reduced due to floats.
The problem is that anonymous text boxes assume the width of their container.
I want the inner elements to respond to width like 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 I need a container to compress the inner divs ...
that's fine 
and so on
but that's not what I'm looking for ...
I understood the spec correctly, and if so, is there a way to achieve what I am looking for?
UPDATE As @Alohci pointed out, the more important link is
10.3.9 'Inline-block', non-replaceable elements in normal flow
If "width" is "auto", the value used is the width of the shrink to fit, as for floats.
source to share
You understood the implications of the specification correctly, although IMHO you did not quote the critical part. To compress-insert an algorithm that says:
... calculate the preferred width by formatting content without except for lines where explicit line breaks occur, and also calculate the preferred minimum width, for example by using all possible line breaks .... Third, find the available width: in this case it is - the width of the containing block minus the used "margin-left", "border-left-width", "padding-left", "padding-right", "border-right-width", "margin-right" and the widths of any corresponding scroll bars.
Then shrinkage width to stop: min (max (preferred minimum width, available width), preferred width).
Which allows the available width, not the minimum width for your "no wraparound" case.
Unfortunately CSS makes extensive use of this algorithm, so alternative layouts such as floating fields have the same problem.
source to share