Button too large inside <details> element.

[strfx]

Hi, first of all thanks for your great work on bulma!

I ran into an issue placing buttons inside a <details> element.

Description

Buttons inside the <details> element appear too big in comparison when placed outside of that element, see:

Tested with latest Bulma version (v0.9.4) under Firefox and Chrome. Seems to be related to: #1696

Steps to Reproduce

To reproduce, check out the code below or this codepen: https://codepen.io/strfx/pen/MWPWbvY

The first button appears regularly sized, the button inside <details> is too big.

<section class="section">
    <div class="container">
        <a class="button">I am regularly sized</a>

        <details>
            <a class="button">I am too big</a>
        </details>
    </div>
</section>

Workaround

Adding box-sizing: border-box; to the element fixes the buttons' heights (from #1696 (comment)).

details .button {
    box-sizing: border-box;
}

[qwertyroop]

Hey can I get assigned? I want to work on this!

[Zubrik]

Hi,

It seems that the problem is due to box-sizing not being inherited through the details element: https://stackoverflow.com/a/75349350