Skip to content

Chrome details element doesn't correctly propagate box-sizing #22872

@andrewbelcher

Description

@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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions