Why height of my PageLayout is too short?

I am using OOjs-ui to develope a game I am creating a PageLayout, but its height is only like a small titlein it(not limited max-height, height is auto)

<link href="https://cdnjs.cloudflare.com/ajax/libs/oojs-ui/0.51.2/oojs-ui-wikimediaui.css" rel="stylesheet"/>
<div class="oo-ui-layout oo-ui-panelLayout oo-ui-panelLayout-scrollable oo-ui-panelLayout-expanded oo-ui-pageLayout" style="display: flow-root; position: static;">
    <fieldset class="oo-ui-layout oo-ui-labelElement oo-ui-fieldsetLayout">
        <legend class="oo-ui-fieldsetLayout-header"><span class="oo-ui-iconElement-icon oo-ui-iconElement-noIcon"></span><span class="oo-ui-labelElement-label">Demo a title of a fieldset</span></legend>
        <div class="oo-ui-fieldsetLayout-group">
            <div class="oo-ui-layout oo-ui-panelLayout oo-ui-panelLayout-expanded" style="display: grid;">
                <div class="oo-ui-layout oo-ui-panelLayout oo-ui-panelLayout-padded oo-ui-panelLayout-expanded oo-ui-panelLayout-framed" style="display: flow-root; position: static; align-self: center;"><label class="oo-ui-widget oo-ui-widget-enabled oo-ui-labelElement oo-ui-labelElement-label oo-ui-labelWidget" style="font-size: 5mm;">Demo title of a panel</label><br><span class="oo-ui-widget oo-ui-widget-enabled oo-ui-buttonElement oo-ui-buttonElement-framed oo-ui-iconElement oo-ui-labelElement oo-ui-flaggedElement-progressive oo-ui-flaggedElement-primary oo-ui-buttonWidget"><a class="oo-ui-buttonElement-button" role="button" tabindex="0" rel="nofollow"><span class="oo-ui-iconElement-icon oo-ui-icon-imageGallery oo-ui-image-invert"></span><span class="oo-ui-labelElement-label">Demo button</span><span class="oo-ui-indicatorElement-indicator oo-ui-indicatorElement-noIndicator oo-ui-image-invert"></span></a></span></div>
            </div>
        </div>
    </fieldset>
</div>

I am trying to add a BFC to it But they are no any effect when I set the height to auto

Solution

I just added a CSS reset to your code and looks fine. (set html and body's height to 100%, no margin, no padding) and remove the position static from your inline styles.

<link href="https://cdnjs.cloudflare.com/ajax/libs/oojs-ui/0.51.2/oojs-ui-wikimediaui.css" rel="stylesheet"/>
<style>
    html, body {
        height: 100%;
        padding: 0;
        margin: 0;
    }
</style>
<div class="oo-ui-layout oo-ui-panelLayout oo-ui-panelLayout-scrollable oo-ui-panelLayout-expanded oo-ui-pageLayout" style="display: flow-root;">
    <fieldset class="oo-ui-layout oo-ui-labelElement oo-ui-fieldsetLayout">
        <legend class="oo-ui-fieldsetLayout-header"><span class="oo-ui-iconElement-icon oo-ui-iconElement-noIcon"></span><span class="oo-ui-labelElement-label">Demo a title of a fieldset</span></legend>
        <div class="oo-ui-fieldsetLayout-group">
            <div class="oo-ui-layout oo-ui-panelLayout oo-ui-panelLayout-expanded" style="display: grid;">
                <div class="oo-ui-layout oo-ui-panelLayout oo-ui-panelLayout-padded oo-ui-panelLayout-expanded oo-ui-panelLayout-framed" style="display: flow-root; position: static; align-self: center;"><label class="oo-ui-widget oo-ui-widget-enabled oo-ui-labelElement oo-ui-labelElement-label oo-ui-labelWidget" style="font-size: 5mm;">Demo title of a panel</label><br><span class="oo-ui-widget oo-ui-widget-enabled oo-ui-buttonElement oo-ui-buttonElement-framed oo-ui-iconElement oo-ui-labelElement oo-ui-flaggedElement-progressive oo-ui-flaggedElement-primary oo-ui-buttonWidget"><a class="oo-ui-buttonElement-button" role="button" tabindex="0" rel="nofollow"><span class="oo-ui-iconElement-icon oo-ui-icon-imageGallery oo-ui-image-invert"></span><span class="oo-ui-labelElement-label">Demo button</span><span class="oo-ui-indicatorElement-indicator oo-ui-indicatorElement-noIndicator oo-ui-image-invert"></span></a></span></div>
            </div>
        </div>
    </fieldset>
</div>