EuiFlexGroup seems to be causing issues with Storybook

[jimmy-e]

To Reproduce:

To reproduce this issue, please go to this repo, and run the following command:

yarn && yarn storybook

Issue:

I want to create a storybook file / page that has full window height. I did this by doing the following:

.storybook/preview-head.html:

<style>
  body {
    height: 100vh;
  }
</style>

I also made sure that the background of my storybook page is pink so you can clearly see this.

However, when I run storybook for my application page (which uses EUI components and flexible layouts), the application goes beyond the desired 100vh pink background. It also creates a horizontal scroll bar with some extra white margin on the right hand side (please see the image below).

Removing the negative margins for some of the flex groups seems to resolve some of these issues, but of course that impacts how the items are spaced between each other.

How can I use the component that I have built with EUI's flex layout to not have any of this extra right hand margin and also not go beyond the designated part of my page? Thanks for the help!

[cchaos]

Hi @jimmy-e . Yeah we know that the negative margins we have on our flex groups aren't always ideal, mainly for situations just like this (#937). We're mostly waiting on better browser support for gap. What you'll need to do is apply a wrapper that accommodates for this negative margin with padding of the same value.

I emulated your app layout in this codesandbox: https://codesandbox.io/s/objective-shape-8lgrt

As for the body still scrolling, yes this is the behavior of browsers even though you applied a manual height. You also need add overflow: hidden to actually hide the overflowing content. But then you'll need to provide a overflow: auto on the container that you want to scroll.

[jimmy-e]

Thanks @cchaos, this helped a lot! Keep up the great work and have a great weekend!