FremyCompany
Height not being set for container if box-sizing is not content-box and element has border/padding
Hello,
I have a container height issue with all the tests I have been able to do on Edge. The polyfill gives a position: absolute and fixed height on each grid item, but the container doesn't compute it's children's height, so they overflow.
Codepen : http://codepen.io/raphaelgoetter/pen/ZQLBxd Screenshots : http://www.hostingpics.net/viewer.php?id=700041edgepolyfill.png
https://github.com/FremyCompany/css-grid-polyfill/blob/master/src/css-grid/lib/grid-layout.js#L2489
It doesn't work because you have set box-sizing:border-box and a non-zero border, so width computes to 6px despite being actually what my code expects to be 0...
If you want to make a pull request with that change, I'll merge it. Basically, you need to replace the "0px" value by the the sum of border-top / border-bottom / padding-top / etc depending on the value of box-sizing.
There might be other places where box-sizing isn't supported properly, I am not sure you won't get into any trouble just because you fix that one issue. It would definitely be much better though :)
Oh, you're right.
It's OK when the container is box-sizing: content-box;. Thats's tricky : every frameworks I know begin with something like * {box-sizing: border-box;} :/