Element doesn't break properly firefox

Question

I have this css code:

.parent {
  column-count: 2;
}
p, h2, h3, h4, h5, h6 {
  page-break-inside:avoid;
  break-inside:avoid;
}

and the html:

<div class="parent">
 <p>lorem ipsum and so on</p>
</div>

Chrome v80 (All nice and well):

Firefox v74:

These tricks don't work. In the firefox doc's it says it should work. But it just doesn't. What am I doing wrong? Striped codepen

Answer 1

add margin:0; at least to p

p{margin:0}