css - Transfer block in table-cell on a new line -

i’m writing template marking on flex/box. , faced problem of emulation of properties. @ moment, decide them on js. complicates code.

so decided try use property of table-cell child elements parent has property display: block. yes, it’s not right, works!

when i’m trying break table-cell elements strings, ran problem. , that’s how tried solve them:

• if child blocks table-cell overflow parent horizontally, following blocks not transferred new line. , logical. example: nowrap in link.

• if use cancel flow, lose equal width of columns element wrapped next line. so, method works ie9+. i’m willing drop ie7, not ready abandon ie8. example: wrap nth-of-type in link.

• if use blocks separate table-cell on line, becomes fine! complicates css , js code. example: wrap break elements in link.

example: http://codepen.io/anon/pen/gmgxmo

---

what ways break table-cell can applied, besides above described options?

an example of 12 column layout, fix problem of calculation of width percentage: http://codepen.io/anon/pen/pmwrvk in order make clear why this.

i glad hear answers! , excuse me bad english.

p.s.: ignore strange size of width in percent. calculated according formula:

(100 * element.clientwidth / element.offsetwidth).

the smaller size, more. funny. rule applicable parent display: block containing child elements display: table-cell