Chrome details element doesn't correctly propagate box-sizing

[andrewbelcher]

There is a bug in Chrome where inheritance of box-sizing does not happen correctly with the details element. This results in all input (and every other element that is width: 100%) overflowing the details.

This is demonstrated by this codepen.

The solution is to add:

details > * {
  box-sizing: border-box;
}

Would post a PR, but can't get grunt working locally and don't have time to fix it now.

[mdo]

Would post a PR, but can't get grunt working locally and don't have time to fix it now.

We're off Grunt now and on npm scripts :). Pull the latest, update bundler, npm install, and you should be good to go.

[prateekgoel]

I think the above solution will be specific to input elements. There may me scenarios where this is the problem with other elements too.
I think, the better solution is to change box-sizing: inherit; to box-sizing: border-box;
Like this:

*, *::before, *::after {
  box-sizing: border-box;;
}

I would like to make this change.