box-sizing not inherited through DETAILS element?-CodePudding

Using a common technique for inheriting box-sizing, the value is not inherited by the child elements of the DETAILS element even though the DETAILS element has the proper value.

In the example snippet, the DIV outside the DETAILS element inherits box-sizing--as expected and desired--but the DIV inside the DETAILS element does not. You can verify with DevTools.

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>

CodePudding user response：

Generally, it's pretty safe to say that if Chrome and Firefox exhibit the same surprising behaviour, then it's correct.

And this is no different. The HTML5 standard says:

The details element is expected to render as a block box. The element is also expected to have an internal shadow tree with two slots. ...

The details element's second slot is expected to have its style attribute set to "display: block; content-visibility: hidden;" when the details element does not have an open attribute. When it does have the open attribute, the style attribute is expected to be removed from the second slot.

Because the slots are hidden inside a shadow tree, this style attribute is not directly visible to author code. Its impacts, however, are visible.

So the slots are effectively elements with style, and the child elements of the details element inherit that style, not the style of the details element. And because *, *::after, *::before won't match the slot, what the div inherits is the initial value of box-sizing, which is content-box.

CodePudding user response：

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

details div {
  box-sizing: inherit;
}

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

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