box-sizing not inherited through DETAILS element?

Question

Using the common technique of inheriting box-sizing, even if the DETAILS element has the correct value, that value will not be inherited by the DETAILS element's child elements.

In the example code snippet, the DIV outside the DETAILS element inherits box-sizing (as expected and required), but the DIV inside the DETAILS element does not. You can use DevTools for verification.

Firefox and Chrome both exhibit this behavior. Is the behavior correct?

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

<div>Box sizing outside Details?</div>

<details open>
    <summary>Summary</summary>
    <div>Box sizing inside Details?</div>
</details>

P粉530519234 · Answer

This appears to be a known issue, where the box-sizing property is not properly inherited by child elements within the details element. According to some sources, this is due to a bug in some browser rendering engines. To resolve this issue, you can add the following code to explicitly set the box-sizing attribute of the element inside the details element:

details div {
  box-sizing: inherit;
}

Box sizing outside Details?


    Summary
    Box sizing inside Details?

details div {
  box-sizing: inherit;
}

Box sizing outside Details?


    Summary
    Box sizing inside Details?

P粉217629009 · Answer

In general, it's safe to say that if Chrome and Firefox exhibit the same surprising behavior, then it's correct.

This is no exception. HTML5 standard representation:

So the slot is actually an element with a style, and the detail element's child elements inherit that style, not the detail element's style. And since *, *::after, *::before will not match the slot, the div inherits the initial value of box-sizing, that is, content-box.