О переполнении тега p тега div ⇐ CSS

[Anonymous]

Проблема возникает на Chrome и Edge. но Mozilla работает нормально
посмотрите, тег p переполняет тег div



ожидаемый результат:

[img]https://i .sstatic.net/Ht24ncOy.png[/img]

какое ограничение моего кода заключается в том, что проблема возникает в Chrome, но не в Mozilla . как я могу получить ожидаемый результат в Chrome, чтобы остановить переполнение тега абзаца?

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

div {
height: 200px;
width: 200px;
}

p {
margin: 0;
}

#first {
background-color: cadetblue;
padding: 20px;
border: 10px solid black;
}

#second {
background-color: gold;
border: solid black;
border-width: 20px 10px;
margin-left: 260px;
}

#third {
background-color: indianred;
border: 10px solid black;
margin-left: 40px;
}

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at sapien porttitor urna elementum lacinia. In
id magna pulvinar, ultricies lorem id, vehicula elit. Aliquam eu luctus nisl, vitae pellentesque magna. Phasellus
dolor metus, laoreet ac convallis sit amet, efficitur sed dolor.

что добавить, чтобы решить проблему?

Подробнее здесь: https://stackoverflow.com/questions/787 ... ng-div-tag