Overflowing Content visible when flex item is added to markup.html without container

Tell us about the issue you are experiencing

When adding an element to the style guide that is mostly flexbox based without a container. The content spills onto the Introduction page as the pre-loaded content wrapper cant contain the flex items.

How can this issue be replicated?

Add Multiple items to Astrum markup.html files that contain wrappers that are flex based.

Screenshots / Screencast

Your environment

Platform: MAC (Chrome -> Latest Release & Canary) OS Version: Latest High Sierra Node Version: v8.9.1 NPM Version: Using Yarn 1.3.2 Astrum Version: v1.9.5

Hey folks,

Loving the style guide and currently using it for one of our projects. I have however found a weird bug when I add a bunch of components to the style guide that contain flex based items. The preload wrapper seems to be overflowing the content loaded onto the introduction page hich creates the above issue in the screenshot.

I've managed to fix this by adding the following CSS to the preload container:

    .ndpl-preloaded {
        display: table;
        overflow: hidden;
    }

This seems to fix the overflow and contain the preloaded content without affecting the style guide components when selected:

Let me know your thoughts, I'll attach a pull request to the ticket tonight.

Keep up the great work!

Cheers

Craig

NoDivide / astrum