0

I've simple section using Flex

enter image description here

The same section in IE 11

enter image description here

The problem comes from using display: flex; flex-direction: column; in defaultSection. Once removed it shows up. But I can't remove it. It's nessecary for other, more advanced use cases.

I've tried to workaround this issue by using:

@media all and (-ms-high-contrast:active) {
    .defaultSection {
        display: flex;
        flex-direction: column;
    }
}

.defaultSection {
    border: 1px solid #bbbbbb;
    padding-bottom: 0px;
    margin: 5px;
    width: calc(100% - 10px);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    border-radius: 5px;
}

And it seems to work. I am just not sure if that's not gonna blow things out in the long run for me. Maybe there is better alternative than this?

<!-- saved from url=(0014)about:internet -->
<!DOCTYPE html>
<html>
    <head>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <meta content="width=device-width, initial-scale=1" name="viewport">
        <meta name="author">
        <meta content="2020-09-12 19:31:36" name="revised">
        <title>My title</title><!-- CSS Default fonts START -->
        <link href="https://fonts.googleapis.com/css?family=Roboto|Hammersmith+One|Questrial|Oswald" type="text/css" rel="stylesheet" /><!-- CSS Default fonts END -->
        <!-- CSS Default fonts icons START -->
        <link href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" type="text/css" rel="stylesheet" /><!-- CSS Default fonts icons END -->
        <!-- CSS Always Required Default Visual Settings START -->
        <style>
            .defaultSection {
                display: flex;
                flex-direction: column;
                border: 1px solid #bbbbbb;
                padding-bottom: 0px;
                margin: 5px;
                width: calc(100% - 10px);
                box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
                transition: 0.3s;
                border-radius: 5px;
            }

            .defaultSectionHead {
                display: flex;
                justify-content: center;
                padding: 5px;
                margin: 0px 0px 0px 0px;
                font-weight: bold;
                background-color: #00bfff;
                color: #ffffff;
            }

            .defaultSectionText {
                text-align: center;
            }
        </style>
        <!-- CSS  START -->
        <style>
            .overflowHidden {
                overflow: hidden;
                overflow-x: hidden;
                overflow-y: hidden;
            }

            .flexParent {
                display: flex;
                justify-content: space-between;
                padding: 2px;
            }

            .flexParentInvisible {
                display: flex;
                justify-content: space-between;
            }

            .flexElement {
                flex-basis: 100%;
            }

            .flexPanel {
                flex-basis: 100%;
            }

            .flex-grid {
                display: flex;
            }
        </style>
    </head>

    <body>
        <div class="defaultSection overflowHidden ">
            <div class="defaultSectionHead">
                <div class="defaultSectionText"><a name="Default Section Style">Default Section Style </a>&nbsp;<a id="show_anchor-s17ncte" href="javascript:void(0)" onclick="show('anchor-s17ncte'); " style="display:none">(Show)</a><a id="hide_anchor-s17ncte" href="javascript:void(0)" onclick="hide('anchor-s17ncte'); " style="display:none">(Hide)</a></div>
            </div>
            <div name="anchor-s17ncte" id="anchor-s17ncte" class="flexParent flexElement overflowHidden defaultSectionContent">
                <div id="anchor-s17ncte" class="flexParent flexElement overflowHidden defaultSectionContent collapsable">
                    <div>
                        <div Align="center"><span style="color:#ff0000;text-align:center">test1</span></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="defaultSection overflowHidden ">
            <div class="defaultSectionHead">
                <div class="defaultSectionText"><a> </a>&nbsp;<a id="show_anchor-1kln6uz" href="javascript:void(0)" onclick="show('anchor-1kln6uz'); " style="display:none">(Show)</a><a id="hide_anchor-1kln6uz" href="javascript:void(0)" onclick="hide('anchor-1kln6uz'); " style="display:none">(Hide)</a></div>
            </div>
            <div name="anchor-1kln6uz" id="anchor-1kln6uz" class="flexParent flexElement overflowHidden defaultSectionContent">
                <div id="anchor-1kln6uz" class="flexParent flexElement overflowHidden defaultSectionContent collapsable">
                    <div>
                        <div Align="center"><span style="color:#ff0000;text-align:center">test2</span></div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
MadBoy
  • 10,824
  • 24
  • 95
  • 156
  • maybe this helps: https://stackoverflow.com/questions/38528374/internet-explorer-doesnt-expand-a-flexbox-with-flex-direction-column – pL4Gu33 Sep 12 '20 at 18:15
  • 1
    @pL4Gu33 it doesn't. I tried it. Adding flex to body makes things complicated in other areas and as you notice I already have width calculated property. – MadBoy Sep 12 '20 at 18:20

0 Answers0