Custom element is not ignored when child is inline-block - html

Question

I've got custom elements in my code which display some odd behaviour when a child element has a display: inline-block style.
Consider the following two div elements:
<div style="padding: 4px;">
<randomcustomelement style="background-color: yellow">
<div style="display: block; height: 36px; background-color: red; width: 125px;">
<div style="display: block; width: 100%; height: 12px; background-color: green;"></div>
</div>
</randomcustomelement>
</div>
<div style="padding: 4px;">
<randomcustomelement style="background-color: yellow">
<div style="display: inline-block; height: 36px; background-color: red; width: 125px;">
<div style="display: block; width: 100%; height: 12px; background-color: green;"></div>
</div>
</randomcustomelement>
</div>
In the first main div it is clear that the custom element randomcustomelement is ignored by the browser. It does have a proper width and height, but is not rendered, like expected. In the second main div, however, randomcustomelement does get rendered, and what more, it has a very strange height of 17px. I've included an image depicting this through Chrome's element inspector below:
The only difference between both examples is that the child div which is wrapped by randomcustomelement has display: block in the first example, and display: inline-block in the second example. I've given the randomcustomelement a distinct yellow color to also visibly depict that it does get rendered.
This problem is present in all browsers, even though they should ignore the custom element:
User agents must treat elements and attributes that they do not understand as semantically neutral; leaving them in the DOM (for DOM processors), and styling them according to CSS (for CSS processors), but not inferring any meaning from them.
https://www.w3.org/TR/html5/infrastructure.html#extensibility-0
This is really giving me a headache, because I need the inner div to be a display: inline-block. So I would need the second example's code to give the first example's results.

Answer 1

Forcing the style of the randomcustom element to be display: inline-block and height: 0 gives the desired result.
<div style="padding: 4px;">
<randomcustomelement style="background-color: yellow">
<div style="display: block; height: 36px; background-color: red; width: 125px;">
<div style="display: block; width: 100%; height: 12px; background-color: green;"></div>
</div>
</randomcustomelement>
</div>
<div style="padding: 4px;">
<randomcustomelement style="background-color: yellow;height:0;display:inline-block">
<div style="display: inline-block; height: 36px; background-color: red; width: 125px;">
<div style="display: block; width: 100%; height: 12px; background-color: green;"></div>
</div>
</randomcustomelement>
</div>