Css - сжимать родительский div, чтобы он соответствовал ширине одного ребенка и ограничивал ширину другого дочернего элемента

Скажем, родительский div имеет два дочерних div, один из которых содержит текст, а другой - изображение с известной (но переменной) шириной и высотой.

Я хотел бы

• ширина первого дочернего элемента (содержащего изображение) div для сжатия в соответствии с шириной изображения (это я могу сделать)
• родительский div (неуказанной ширины), чтобы сжиматься, чтобы соответствовать ширине содержащего изображение div (это тоже нормально)
• содержащий текст второй дочерний div (также неопределенной ширины), соответствующий размеру родительского div, независимо от количества содержащегося в нем текста (это становится сложным).

У меня есть рабочая версия, которая делает то, что я хочу, пока количество текста во втором дочернем объекте не увеличит ширину родительского div, чем размер изображения.

Здесь мой код:

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>

и здесь jsfiddle: http://jsfiddle.net/BmbAS/1/

вы можете увидеть, где это происходит неправильно, щелкнув ссылку "удлинить/сократить текст", чтобы увеличить количество текста

TL;DR - я хочу, чтобы все divs были одинаковой ширины, равной ширине изображения

пс. требуется только современное решение для браузера

Ответы

#container {
    display: table-cell;
}
#child1 {
    display: table-row;
    width: 1px;
}
#child2 {
    display: table-cell;
    width: 1px;
}

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>