Установить родительскую ширину в ширину дочернего элемента, выровненного снизу

Question

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

Вот мой HTML/CSS:

HTML:

<div id ="header-right"> 
    <div id="content1"></div> 
    <div id="footer"></div> 
</div> 

CSS :

#header-right{ 
    background-color: red; 
    position: relative; 
    display: inline-block; 
    height: 300px; /*The actual width is unknown, this is just for example*/ 
} 
#content1{ 
    background-color: blue; 
    width: 200px; 
    height: 100px; 
} 
#footer{ 
    background-color: cyan; 
    position: absolute; 
    bottom: 0; 
    width: 300px; /*Also an unknown value*/ 
    height: 25px; 
} 

Вы можете посмотреть на этой jfiddle, чтобы увидеть, что происходит: https://jsfiddle.net/rkdqp9m5/2/

Вы можете видеть, что контейнер div игнорирует нижний колонтитул, поскольку он абсолютно расположен.

Однако, если я не использую абсолютное позиционирование для нижнего колонтитула, то я не могу запереть колонтитула в нижней части DIV, как вы можете видеть в этом jfiddle https://jsfiddle.net/rkdqp9m5/3/

Я хочу, чтобы заблокировать колонтитул в нижней части контейнера, но я также хочу, чтобы ширина родителя была основана на нижнем колонтитуле. Я не хочу использовать таблицы для этого, и я не хочу использовать фиксированные ширины или высоты, поскольку размеры контейнера и нижнего колонтитула будут основаны на изображениях, ширина которых я не знаю.

Edit: Я хотел бы, чтобы это строго в HTML/CSS, если это возможно

Answer 1

Если вы все в порядке с требованиями браузера от flexbox, вы можете сделать:

#header-right { 
 
    background-color: red; 
 
    padding: 20px 0px 0px 0px; 
 
    height: 300px; 
 
    display: inline-flex; 
 
    flex-direction: column; 
 
    justify-content: space-between; 
 
} 
 
#content1 { 
 
    background-color: blue; 
 
    width: 200px; 
 
    height: 100px; 
 
    align-self: flex-start; 
 
} 
 
#footer { 
 
    background-color: cyan; 
 
    width: 300px; 
 
    height: 25px; 
 
    align-self: flex-end; 
 
}

<div id="header-right"> 
 
    <div id="content1"></div> 
 
    <div id="footer"></div> 
 
</div>

JSFIDDLE DEMO со всеми необходимыми префиксами.

Answer 2

ли эта помощь: Relative parent DIV to inherit the width of absolute child DIV

Что это говорит о том, что вы не можете использовать чистый CSS, но вы можете используйте Javascript для достижения того, что вы пытаетесь сделать.