Extra height in IE

[DhudumVishal]

I'm using re-resizable 6.4.0

    import "react-app-polyfill/ie11";
    import "react-app-polyfill/stable";

    import * as React from "react";
    import { render } from "react-dom";
    import { Resizable } from "re-resizable";

    const style = {
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      border: "solid 1px #ddd",
      background: "#f0f0f0"
    };

    const App = () => {
      return (
        <div
          style={{
            width: '300px',
            height: '1100px',
            display: 'flex',
            flexDirection: 'column',
            overflow: 'hidden',
          }}
        >
          <Resizable
            style={style}
            defaultSize={{
              width: '300',
              height: '900',
            }}
            maxHeight="1000"
            minHeight="500"
          >
            001
          </Resizable>
          <div style={{ ...style, width: '300px', height: '100%', minHeight: '1px' }}>002</div>
        </div>
      );
    };

    render(<App />, document.getElementById("root"));

My browser is: IE 11

I am sure this issue is not a duplicate?

Description

I had a requirement were the page height is greater than 1000px and resizable is 900px. The above code works fine for all other browsers but gives extra height in IE 11 which cannot be reduced as the height is beyond the HTML. The extra height is around 100vh so it cannot be ignored.

Basically my requirement was to make second div re-sizable with re-sizable handler at top i.e. between both div's that's why i have used first div as re-sizable and my re-sizable height is 900px.

Steps to Reproduce

1. Run the above code in IE 11

Cannot provide sandbox link as its not working in IE

Expected behavior

There should be no extra height

Actual behavior

Adds extra height.