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 были одинаковой ширины, равной ширине изображения

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

Ответ 1

Смотрите эту отредактированную версию вашего jsFiddle.

Вот что добавлено в CSS:

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

Ответ 2

Ответ, предоставленный @Chris, приводит меня к следующему отличному решению моего случая, когда мне нужно подогнать контейнерный элемент div только к первому дочернему элементу (и оставить оставшиеся дочерние элементы для автоматического подгонки под ширину контейнера):

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>

Ответ 3

Если вы хотите использовать небольшой javascript (jQuery в этом примере), вы можете установить ширину текста div с шириной изображения div.

Попробуйте добавить $("#child2").css({'width': $('#child1').width()}); в конец JS в вашей скрипке или посмотрите здесь: http://jsfiddle.net/VXEMu/