FremyCompany / css-grid-polyfill

A working implementation of css grids for current browsers.
MIT License
1.11k stars 82 forks source link

Height not being set for container if box-sizing is not content-box and element has border/padding #46

Open raphaelgoetter opened 7 years ago

raphaelgoetter commented 7 years ago

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

FremyCompany commented 7 years ago

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 :)

raphaelgoetter commented 7 years ago

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;} :/