IE 11 element after column flex overlap

Question

I'm trying to understand where does this go wrong on IE 11.

My footer overlaps with the main content of the page, where the main content does not have a fixed height, as the items filling it might differ. This looks great on chrome, but overlaps on IE 11. Here is a snippet and a jsbin link.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>test</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/js/bootstrap.bundle.js"></script>
    <link rel="stylesheet" type="text/css"
        href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
    <style>
        html,
        body {
            width: 100% !important;
            height: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
            border: 0 !important;
        }

        .navbar {
            margin-bottom: 15px !important;
            position: relative;
        }

        .clearfix:before,
        .clearfix:after,
        .dl-horizontal dd:before,
        .dl-horizontal dd:after,
        .container:before,
        .container:after,
        .container-fluid:before,
        .container-fluid:after,
        .row:before,
        .row:after,
        .form-horizontal .form-group:before,
        .form-horizontal .form-group:after,
        .nav:before,
        .nav:after,
        .navbar:before,
        .navbar:after,
        .navbar-header:before,
        .navbar-header:after,
        .navbar-collapse:before,
        .navbar-collapse:after,
        .pager:before,
        .pager:after {
            content: " ";
            display: table;
        }

        .navbar-header {
            float: left;
        }

        #masthead .navbar-header .logo {
            width: 266px;
            height: 70px;
            display: block;
        }

        #footer {
            background-color: antiquewhite;
        }

        .breadcrumbs {
            list-style-type: none;
            vertical-align: top;
        }
    </style>
</head>

<body role="document" class="d-flex flex-column">
    <nav id="masthead" class="navbar navbar-default" role="banner">
        <div class="navbar-header">
            <a class="logo">stuff here ....</a>
        </div>
    </nav>

    <div class="container-fluid flex-fill w-100 pb-3 border border-primary">

        <div class="d-flex flex-column">

            <div class="breadcrumbs">
                whatevs...
            </div>

            <div class="row">
                <div class="col-xs-12 col-md-8 d-flex flex-column">

                    <div class="text-h1a px-2 my-3 mt-md-5 mb-md-0">
                        <h1 class="m-0 mt-1 font-size-24px">Hello</h1>
                        <div class="d-flex flex-column flex-md-row">
                            <div class="flex-fill font-size-14px font-size-sm-16px">
                                <span>there</span>
                                <span class="ml-2">general kenobi</span>
                            </div>
                        </div>
                    </div>


                    <div class="mt-2 mt-md-0">
                        something here
                        and another thing here
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.

                        did we forget about this?
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.

                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.

                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.

                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.


                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.

                    </div>
                </div>

                <div class="col-xs-12 col-md-4 pr-md-0">
                    SIDE Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                    cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                    ipsam sapiente dolorum tenetur vel distinctio.
                </div>

            </div>

        </div>


    </div>

    <footer id="footer">
        <div class="container-fluid mw-100">
            <ul>
                <li>ABout us</li>
                <li>ABout us</li>
                <li>ABout us</li>
                <li>ABout us</li>
                <li>ABout us</li>
                <li>ABout us</li>
            </ul>
        </div>
    </footer>
</body>

</html>

Looking for a solution to this and also for some documentation to understand and hopefully be able to help others in the future with similar issues. Thank you.

!important is to be use with good reason and as little as possible. height:100% on body is what IE11 strictly apply. remove it and turn it eventaully into a min-height. remove !important too .it could be something alike : jsbin.com/vuhaxoniqi/1/edit?html,output — G-Cyrillus, Commented Aug 10, 2020 at 10:03
G-Cyrillus and gpl's answers are both right and work well in IE. You could select one to accept. The height: 100% !important; on body is the main cause of the issue. Only remove that line can also solve the issue. — Yu Zhou, Commented Aug 11, 2020 at 2:16
@G-Cyrillus that's true, thank you, the body height was the problem. Could you point me to some good documentation about this? I'm starting to dabble with UI — knee pain, Commented Aug 11, 2020 at 8:04

gpl · Accepted Answer · 2020-08-10 10:38:55Z

Check out this code:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>test</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/js/bootstrap.bundle.js"></script>
    <link rel="stylesheet" type="text/css"
        href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
    <style>
        html,
        body {
            width: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
            border: 0 !important;
        }

        .navbar {
            margin-bottom: 15px !important;
            position: relative;
        }

        .clearfix:before,
        .clearfix:after,
        .dl-horizontal dd:before,
        .dl-horizontal dd:after,
        .container:before,
        .container:after,
        .container-fluid:before,
        .container-fluid:after,
        .row:before,
        .row:after,
        .form-horizontal .form-group:before,
        .form-horizontal .form-group:after,
        .nav:before,
        .nav:after,
        .navbar:before,
        .navbar:after,
        .navbar-header:before,
        .navbar-header:after,
        .navbar-collapse:before,
        .navbar-collapse:after,
        .pager:before,
        .pager:after {
            content: " ";
            display: table;
        }

        .navbar-header {
            float: left;
        }

        #masthead .navbar-header .logo {
            width: 266px;
            height: 70px;
            display: block;
        }

        #footer {
            background-color: antiquewhite;
        }

        .breadcrumbs {
            list-style-type: none;
            vertical-align: top;
        }
    </style>
</head>

<body role="document" class="d-flex flex-column">
    <nav id="masthead" class="navbar navbar-default" role="banner">
        <div class="navbar-header">
            <a class="logo">stuff here ....</a>
        </div>
    </nav>

    <div class="container-fluid flex-fill w-100 pb-3 border border-primary">

        <div class="d-flex flex-column">

            <div class="breadcrumbs">
                whatevs...
            </div>

            <div class="row">
                <div class="col-xs-12 col-md-8 d-flex flex-column">

                    <div class="text-h1a px-2 my-3 mt-md-5 mb-md-0">
                        <h1 class="m-0 mt-1 font-size-24px">Hello</h1>
                        <div class="d-flex flex-column flex-md-row">
                            <div class="flex-fill font-size-14px font-size-sm-16px">
                                <span>there</span>
                                <span class="ml-2">general kenobi</span>
                            </div>
                        </div>
                    </div>


                    <div class="mt-2 mt-md-0">
                        something here
                        and another thing here
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.

                        did we forget about this?
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.

                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.

                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.

                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.


                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.

                    </div>
                </div>

                <div class="col-xs-12 col-md-4 pr-md-0">
                    SIDE Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                    cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                    ipsam sapiente dolorum tenetur vel distinctio.
                </div>

            </div>

        </div>


    </div>



    <footer id="footer">
        <div class="container-fluid mw-100 row">
            <ul>
                <li>ABout us</li>
                <li>ABout us</li>
                <li>ABout us</li>
                <li>ABout us</li>
                <li>ABout us</li>
                <li>ABout us</li>
            </ul>
        </div>
    </footer>
</body>

</html>

You need to remove height: 100% !important; from body style.

This sure does the trick. Thank you. Where would you point me to in order to find good documentation about this? Fairly new to the UI game. — knee pain, Commented Aug 11, 2020 at 8:03

Marios Nikolaou · Accepted Answer · 2020-08-11 09:24:24Z

From the tutorial to change the flex row layout to a column-based flex container you should add the classes d-flex, flex-column, my-flex-container-column.

Your solution has only

<body role="document" class="d-flex flex-column">

so, change to

class="d-flex flex-column my-flex-container-column"

It's good to read tutorial

The !important should be used rarely and only when you override existing css properties. Tested on both resolutions.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>test</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/js/bootstrap.bundle.js"></script>
    <link rel="stylesheet" type="text/css"
        href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
    <style>
        html,
        body {
            width:100%;
            height:100%;
            margin: 0;
            padding: 0;
            border: 0;
        }

        .navbar {
            margin-bottom: 15px;
            position: relative;
        }

        .clearfix:before,
        .clearfix:after,
        .dl-horizontal dd:before,
        .dl-horizontal dd:after,
        .container:before,
        .container:after,
        .container-fluid:before,
        .container-fluid:after,
        .row:before,
        .row:after,
        .form-horizontal .form-group:before,
        .form-horizontal .form-group:after,
        .nav:before,
        .nav:after,
        .navbar:before,
        .navbar:after,
        .navbar-header:before,
        .navbar-header:after,
        .navbar-collapse:before,
        .navbar-collapse:after,
        .pager:before,
        .pager:after {
            content: " ";
            display: table;
        }

        .navbar-header {
            float: left;
        }

        #masthead .navbar-header .logo {
            width: 266px;
            height: 70px;
            display: block;
        }

        #footer {
            background-color: antiquewhite;
        }

        .breadcrumbs {
            list-style-type: none;
            vertical-align: top;
        }
    </style>
</head>

<body role="document" class="d-flex flex-column my-flex-container-column">
    <nav id="masthead" class="navbar navbar-default" role="banner">
        <div class="navbar-header">
            <a class="logo">stuff here ....</a>
        </div>
    </nav>

    <div class="container-fluid flex-fill w-100 pb-3 border border-primary">

        <div class="d-flex flex-column">

            <div class="breadcrumbs">
                whatevs...
            </div>

            <div class="row">
                <div class="col-xs-12 col-md-8 d-flex flex-column">

                    <div class="text-h1a px-2 my-3 mt-md-5 mb-md-0">
                        <h1 class="m-0 mt-1 font-size-24px">Hello</h1>
                        <div class="d-flex flex-column flex-md-row">
                            <div class="flex-fill font-size-14px font-size-sm-16px">
                                <span>there</span>
                                <span class="ml-2">general kenobi</span>
                            </div>
                        </div>
                    </div>


                    <div class="mt-2 mt-md-0">
                        something here
                        and another thing here
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.

                        did we forget about this?
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.

                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.

                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.

                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.


                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.

                    </div>
                </div>

                <div class="col-xs-12 col-md-4 pr-md-0">
                    SIDE Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                    cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                    ipsam sapiente dolorum tenetur vel distinctio.
                </div>

            </div>

        </div>


    </div>

    <footer id="footer">
        <div class="container-fluid mw-100">
            <ul>
                <li>ABout us</li>
                <li>ABout us</li>
                <li>ABout us</li>
                <li>ABout us</li>
                <li>ABout us</li>
                <li>ABout us</li>
            </ul>
        </div>
    </footer>
</body>

</html>

I assume here my-flex-container-column is the same one from the tutorial you provided? Thanks for the link by the way, I'm reading it as I write this — knee pain, Commented Aug 11, 2020 at 8:02
@bgi Yes if you want to make the child elements of body tag as columns then you should add that one too in the body class. The tutorial shows it with examples and it's better solution if it's that what you want. — Marios Nikolaou, Commented Aug 11, 2020 at 9:07
@bgi I don't think that it's the height the problem here. If you remove the classes from your body, you will notice that it works with height and width set to 100% — Marios Nikolaou, Commented Aug 11, 2020 at 9:37

Collectives™ on Stack Overflow

IE 11 element after column flex overlap

2 Answers 2

Not the answer you're looking for? Browse other questions tagged
html
css
twitter-bootstrap
flexbox
internet-explorer-11
or ask your own question.

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Not the answer you're looking for? Browse other questions tagged htmlcsstwitter-bootstrapflexboxinternet-explorer-11 or ask your own question.

Related

Not the answer you're looking for? Browse other questions tagged
html
css
twitter-bootstrap
flexbox
internet-explorer-11
or ask your own question.