Modals with lots of content don't size correctly on IE

[wkeese]

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

On Chrome etc., if the viewport is small enough and/or the modal's content is large enough, the modal will get a scrollbar.

This does not happen on IE11. Instead, the modal overflows the screen.

See https://the-carbon-components.netlify.app/component/modal--default.html or https://react.carbondesignsystem.com/?path=/story/modal--default for simple test cases. In the first link, you need to make your browser window quite small, or add content to the modal, in order to see the problem. In the second link, check the "hasScrollingContent" knob.

Additional information

Here's the current behavior:

Is there some reason the modal is using grid sizing? It seems like it should just be a flexbox (with the buttons on the bottom in a nested flexbox). Note that although the bx--modal-container is display:grid on chrome, it's display:block on IE.

If I switch it to display:flex and put a height on the node, IE basically works: