1

I have some legacy code that I am working on that utilizes column-count: 2 with a break-inside / page-break-inside of avoid on the child elements.

This works as expected when there is more than 1 child, but when there is only one child, the element gets split into the two columns on Firefox. On chrome, the one element is contained to the first column as expected.

I made a codepen to demonstrate this issue: https://codepen.io/anon/pen/rrbEZY Compare the differences in Chrome vs Firefox to understand what I am talking about.

All the resources I can find about this, say that Firefox has supported page-break-inside since Firefox 19.

Is there something else I am missing here to resolve this issue without completely rewriting my codebase?

TylerH
  • 20,799
  • 66
  • 75
  • 101
lfitzgibbons
  • 783
  • 1
  • 5
  • 18

1 Answers1

4

Specifying .child { overflow: hidden; } fixes this, but feels like a bit of a hack.

lion
  • 378
  • 1
  • 6
  • That does feel like a bit of a hack, but it might be the cleanest solution for this I have seen so far. The solution that I came up with involved setting the child to `display: table;` which also seems like a hack. – lfitzgibbons Sep 10 '18 at 18:09
  • Very nice! I have the same problem in FF, Edge. Here is example link on quickatit.com https://www.quackit.com/css/css3/properties/css_break-inside.cfm – vee Nov 25 '19 at 14:59