css - shrink a parent div to fit one child's width and constrain the width of the other child [duplicate]
See this edited version of your jsFiddle.
Here's what's added to the CSS:
#container {
display: table-cell;
}
#child1 {
display: table-row;
width: 1px;
}
#child2 {
display: table-cell;
width: 1px;
}
The answer provided by @Chris leads me to the following, great solution of my case, where I need to fit the container div only to the first child element (and leave the rest child elements to auto fit to the container's width):
div.container {
width: fit-content;
max-width: 100%;
margin: 16px auto;
display: table;
}
div.inner-primary {
display: block;
}
div.inner-rest {
margin-top: 8px;
display: table-caption;
caption-side: bottom;
}<div class="container">
<div class="inner-primary"><div style="width:200px; border:1px dotted #ccc; border-radius:4px; padding: 4px;">This is the main element that drives the width of the container.</div></div>
<div class="inner-rest">This is the first of the rest divs that fit automatically to the container...</div>
<div class="inner-rest">This is the second element...</div>
</div>