Element potomny wychodzi poza rodzica

Cześć.
Stworzyłem sobie szablon strony ale gdy używam "position: fixed" i "positon: absolute" tekst wychodzi poza rodzica.
Czy wiecie dla czego tak się dzieje i co zmienić żeby tekst nie wychodził?
(W JS fiddle w ustawieniach "rezultat na dole")
https://jsfiddle.net/hw18agjd/

Nie używać position absolute ani fixed ;-) (poczytaj jak wpływa na flow)

https://www.w3.org/wiki/CSS_absolute_and_fixed_positioning?source=post_page

Oczywiście z nieużywaniem to żart, ale poczytaj o tych atrybutach to ci się rozjaśni skąd masz ten problem.

Próbujesz może uzyskać efekt position: sticky?

@Xarviel: Chyba chcę ale jak wstawię sticky zamiast fixed to nic się nie dzieje.
@opiszon: Z tego artykułu by wychodziło że to jest nie do zrobienia. Zgodnie z drugim akapitem w sekcji Summary Gdy tylko użyję left i right to zawsze będzie to w odniesieniu do viewportu.
Jedyny sposób to sterowanie wielkością dziecka.
A jedyny sposób żeby dziecko widziało wielkość rodzica to użycie width: inherit który tylko minimalizuje problem ale go nie rozwiązuje ponieważ dolicza margines.

Macie jakieś lepsze pomysły?

adams0 napisał(a):

@Xarviel: Chyba chcę ale jak wstawię sticky zamiast fixed to nic się nie dzieje.

Jeszcze właściwość top potrzebna

.relative-children {
  position: sticky;
  top: 15px;
}

Macie jakieś lepsze pomysły?

Brak

Po użyciu position: sticky i top wszystko działa jak należy.
Wielkie dzięki.