css - shrink a parent div to fit one child's width and constrain the width of the other child [duplicate] - css

Question

This question already has answers here:
How to match width of text to width of dynamically sized image/title?
(2 answers)
Closed 2 years ago.
Say, a parent div has two child divs, one containing text, the other containing an image of known (but variable) width & height.
I would like
the width of the first child (image-containing) div to shrink to fit the width of the image (this i can do)
the parent div (of unspecified width) to shrink to fit the width of the image-containing div (this is ok too)
the text-containing second child div (also of unspecified width) to match the parent div's width irrespective of the quantity of text it contains (this is where it gets tricky).
I have a working version that does what I want until the quantity of text in the second child pushes the parent div's width wider than that of the image.
Here's my code:
css:
#container{border:1px solid #f00;display:inline-block;}
#child1{border:1px solid #0f0;}
#child2{border:1px solid #00f;}
img {border:1px solid #000;}
html:
<div id="container">
<div id="child1"><img src="//www.google.com/logos/2012/Teachers_Day_Alt-2012-hp.jpg" width="300" height="116"></div>
<div id="child2">Lorem ipsum dolor sit amet.</div>
</div>
and here's a jsfiddle:
http://jsfiddle.net/BmbAS/1/
you can see where it's going wrong by clicking the 'lengthen/shorten text' link to increase the quantity of text
tldr - i want all the divs to be the same width which is equal to the width of the image
ps. modern browser solution only necessary

Answer 1

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;
}

Answer 2

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>

Answer 3

If you're willing to use a little javascript (jQuery in this example), you could set the width of the text div with the width of the image div.
Try adding $("#child2").css({'width': $('#child1').width()}); to the end of the JS in your fiddle, or check out the fork here: http://jsfiddle.net/VXEMu/