CSS относительно позиционированное текстовое содержимое div, расширяющееся и перекрывающееся ⇐ CSS

[Anonymous]

Я изо всех сил пытаюсь предотвратить выход текстового содержимого div с относительным расположением за пределы границ.
Разметка:

Код: Выделить всё

lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext

lotsmoretext lotsmoretext lotsmoretext lotsmoretext lotsmoretext lotsmoretext
lotsmoretext lotsmoretext lotsmoretext lotsmoretext lotsmoretext lotsmoretext

CSS:

Код: Выделить всё

.parent {
margin: 5px;
max-height: 100px;
max-width: 400px;
background: pink;
}

.details {
width: 100%;
text-align: center;
font-size: 14pt;
display: grid;
grid-template-rows: 1fr 1fr;
}

.detail1 {
grid-row: 1;
overflow-y: hidden;
}

.detail2 {
grid-row: 2;
overflow-y: hidden;
}

Проверьте этот JFiddle, чтобы увидеть проблему
[img]https://i.stack. imgur.com/Uk9s2.png[/img]


Подробнее здесь: https://stackoverflow.com/questions/782 ... verlapping