Extra vertical scroll bar appears when using IE11 or Microsoft Edge

[MarceloBarrera]

Overview of the problem

I'm using re-resizable version [4.4.8]

My browser is: IE11

I am sure this issue is not a duplicate

Description

On the re-resizable story book using IE11, you could see an extra vertical scroll bar appears. A possible fix would to set the "height" to auto instead of 100% on class "resizable_base"

Steps to Reproduce

Go to http://bokuweb.github.io/re-resizable/?selectedKind=omit%20size&selectedStory=auto.&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel using IE11 or Microsoft Edge. You could see an extra vertical scroll bar appears.

Expected behavior

No extra vertical scroll bar should appear.

Actual behavior

Extra vertical scroll bar appears when using IE11 or Microsoft Edge.

[Sideness]

Same bug here. I just found out that removing the following line (line 282) from /lib/index.js from re-resizable library solves the problem. element.style.height = '100%';

If you don't want to edit re-resizable's files, you can fix it in your app by adding: const resizableBase = document.getElementsByClassName('__resizable_base__'); resizableBase[0].style.height = null; This fix is pretty dirty but this is the only thing I found for now...

[bokuweb]

Ok I'll do some investigation

[hong1997]

another more elegant way (LESS): .xxx{ :global(.resizable_base){ height: auto !important; // stylelint-disable-line declaration-no-important } }

[georgefst]

I don't think this is specific to MS browsers, and it also applies in the vertical case.

In Firefox, I find that the element always overflows with the default width and height styles. In the absence of an upstream fix, this can usually be worked around by only enabling the required handles, e.g. with enable={{ bottom: true }}.