Как без задания высоты сделать внешний div расширяемым вниз с этим кодом?

Question

[Aleksey111]

В данный момент внутренний блок уезжает вниз и всё портит, при добавлении, допустим h1 или span во внешний блок(визуально должно смотреться над внутренним блоком надпись).
Где вообще почитать про то, как ведут себя элементы?(только не htmlbook, что нибудь с большим кол-вом примеров и подробнее, если такое существует)
Вот по идее, есть внутренний блок, и внешний должен растягиваться из за него, но без задания высоты всё рушится. Я так понимаю, это из за того, что мы задали position-ы.
Мне говорили, что задания высоты лучше как можно чаще избегать, т.к. внешний блок должен растягиваться вниз, если вдруг понадобиться добавить элементов.
https://jsfiddle.net/Aleks70694/g1w48rrh/

Comments

[Андрей]

Что в результате вы хотите получить?

[Aleksey111]

Андрей: ну календарик, а получить для начала я хочу возможность расширения вниз без задания фиксированной высоты

[erange]

https://jsfiddle.net/bwjbxn5L/

без позиционирования вроде работает
оно нужно?

[Aleksey111]

erange: да, именно с ним надо

[Андрей]

Aleksey111: html5.by/blog/flexbox

[erange]

Aleksey111: ну не знаю, как внешний может понять высоты внутреннего, если тот имеет absolute. возможно, имеет смысл позиционировать внешний блок, а внутренний оставить с фиксированными размерами.

Answer 1

[Ankhena]

Зачем вам вообще абсолютное позиционирование в этом случае?
Таким позиционированием вы выводите дочерний блок из потока.

Можно так:
https://jsfiddle.net/v8v1nuum/
Можно флексами

Comments

[Aleksey111]

спасибо)