Bulma: Hero Body misalignment in Internet Explorer 11

[RichardBosworth]

This is about Bulma.

Misaligned hero in Internet Explorer 11.

Overview of the problem

This is about the Bulma CSS framework
I'm using Bulma 0.9.0
My browser is: IE11

Description

When creating a full height hero section, based off the Bulma documentation, whilst it works well in Chrome/Edge etc, the alignment of the Body is offset in Internet Explorer 11.

Steps to Reproduce

1. Create a hero section

<section className="hero is-light is-fullheight">
            <NavBar />
            <div className="hero-body">
                <div className="container">
                    <div className="card">
                        <div className="card-header">
                            <div className="card-header-title">Login</div>
                        </div>
                    </div>
                </div>
            </div>
</section>

Expected behavior

This should work on all browsers

Actual behavior

The body of the hero is offset to the side/down on Internet Explorer 11. See image below.

The extent of this depends on the size of the browser window.

[jgthms]

Unfortunately, IE11 has weird bugs with Flexbox. I’m not sure how to fix this.

[sierikov]

I think we don't need the support of IE anymore.