I’m writing a template for marking on flex/box. And faced with the problem of emulation of some properties. At the moment, I decide them on the JS. What complicates code.
So I decided to try to use the property of table-cell for child elements whose parent has the property display: block. Yes, it’s not right, but it works!
When I’m trying to break the table-cell elements to strings, I ran into a problem. And that’s how I tried to solve them:
If the child blocks table-cell overflow the parent horizontally, then the following blocks are not transferred to the new line. And it is logical.
If I use the cancel flow, I lose equal to the width of columns for the element to be wrapped to the next line. So, this method only works for IE9+. I’m willing to drop IE7, but not ready to abandon IE8.
If I use the blocks which separate the table-cell on the line, everything becomes fine! But this complicates the CSS and JS code.
What ways to break table-cell can be applied, besides the above described options?