Flex layout holy grail content doesn't grow on IE11

Question

UPDATE I tried adding height:100vh into .app-container but it doesn't work.

I'm using bootstrap 4 to design my web application. I'm trying to design Holy grail layout to it.

Everything seems to be fine on Chrome, but IE 11. On chrome, my layout is:

But what on IE 11 is not the same as above:

The green area doesn't grow like what it does in Chrome.

Here is my layout.scss classes I'm using:

.app-container {

  display: flex;
  flex-direction: column;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  min-height: 100vh;


  .app-navigation-bar-container {
    flex: none;
    -ms-flex: none;
    -webkit-flex: none;
    margin-bottom: 5px;
  }

  .app-content-container {
    flex: 1;
    -ms-flex: auto;
    -webkit-flex: 1;
    background-color: green;
  }

  .app-footer {
    background-color: blue;
    height: 50px;
  }
}

$navbar-wrapper-height: 65;
$navbar-inner-wrapper-height: 55;
$navbar-panel-margin-bottom: 5;


.navbar-wrapper {
  height: #{$navbar-wrapper-height}px;
  position: inherit;

  .navbar-inner-wrapper {
    height: #{$navbar-inner-wrapper-height}px;

    .navbar-panel {
      display: flex;
      flex-direction: row;
      -ms-flex-direction: row;
      -webkit-flex-direction: row;
      margin-bottom: #{$navbar-panel-margin-bottom}px;

      .navbar-item {
        padding-right: 15px;
        padding-left: 15px;
        padding-top: 5px;
        padding-bottom: 5px;
        text-align: center;
        border-right: white solid 1px;

        &:first-child {
          padding-left: inherit;
        }

        &:last-child {
          padding-right: inherit;
          border-right: inherit;
        }

        .main {
          color: white;
          font-weight: bold;
          font-size: 16px;
        }

        .sub-header {
          color: white;
        }
      }
    }
  }
}

.navbar-divider {
  background-color: #ee8a01;
  height: 5px;
  margin-top: #{$navbar-wrapper-height - $navbar-inner-wrapper-height - $navbar-panel-margin-bottom}px;
}

.bg-red {
  background-color: #d61a0c;

  a {
    color: white;
  }
}

Here is my codepen

Can anyone help me please ?

Thanks,

Possible duplicate of [Flexbox, min-height and IE11](https://stackoverflow.com/questions/44700068/flexbox-min-height-and-ie11) — Gerard, Nov 02 '18 at 04:10
I tried, but doesn't work. I already provided the `codepen` project. Can anyone take a look ? — Redplane, Nov 02 '18 at 04:52

score 1 · Accepted Answer · answered Nov 03 '18 at 09:40

To resolve this problem, you could add a specific height to flex container: min-height: 100vh; have to become height: 100vh; 'cause to this IE11 bug:

In IE10 and IE11, containers with display: flex and flex-direction: column will not properly calculate their flexed childrens' sizes if the container has min-height but no explicit height property https://caniuse.com/#search=flex

After that, please add also flex-shrink: 0; or the shorthand flex: 1 0 auto; to your .app-content-container

.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh; /*min-height: 100vh;*/
}
.app-container .app-navigation-bar-container {
  flex: none;
  margin-bottom: 5px;
}
.app-container .app-content-container {
  /*flex: 1 0 auto; 
  background-color: green;*/

  flex: 1;
  -ms-flex: auto;
  -webkit-flex: 1;
  background-color: green;

  flex-shrink: 0; /* --> add this */
}
.app-container .app-footer {
  background-color: blue;
  min-height:50px;
}

.navbar-wrapper {
  height: 65px;
  position: inherit;
}
.navbar-wrapper .navbar-inner-wrapper {
  height: 55px;
}
.navbar-wrapper .navbar-inner-wrapper .navbar-panel {
  display: flex;
  flex-direction: row;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  margin-bottom: 5px;
}
.navbar-wrapper .navbar-inner-wrapper .navbar-panel .navbar-item {
  padding-right: 15px;
  padding-left: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: center;
  border-right: white solid 1px;
}
.navbar-wrapper .navbar-inner-wrapper .navbar-panel .navbar-item:first-child {
  padding-left: inherit;
}
.navbar-wrapper .navbar-inner-wrapper .navbar-panel .navbar-item:last-child {
  padding-right: inherit;
  border-right: inherit;
}
.navbar-wrapper .navbar-inner-wrapper .navbar-panel .navbar-item .main {
  color: white;
  font-weight: bold;
  font-size: 16px;
}
.navbar-wrapper .navbar-inner-wrapper .navbar-panel .navbar-item .sub-header {
  color: white;
}

.navbar-divider {
  background-color: #ee8a01;
  height: 5px;
  margin-top: 5px;
}

.bg-red {
  background-color: #d61a0c;
}
.bg-red a {
  color: white;
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<body style="min-height: 100%;" _nghost-c0="" ng-version="6.1.9">
    <router-outlet _ngcontent-c0=""></router-outlet>
    <authorize-layout _nghost-c1="">
        <div _ngcontent-c1="" class="app-container">
            <div _ngcontent-c1="" class="app-navigation-bar-container">
                <navigation-bar _ngcontent-c1="" _nghost-c2="">
                    <div _ngcontent-c2="" class="navbar-wrapper">
                        <div _ngcontent-c2="" class="bg-red navbar-inner-wrapper">
                            <div _ngcontent-c2="" class="col-lg-8 col-md-10 offset-lg-2 offset-md-1 navbar-panel">
                                <div _ngcontent-c2="" class="flex-grow-1"><img _ngcontent-c2="" style="height: 65px;" src="https://via.placeholder.com/150x65"></div>
                                <div _ngcontent-c2="" class="flex-grow-1 navbar-item">
                                    <div _ngcontent-c2="" class="main">Item 01</div>
                                    <div _ngcontent-c2="" class="sub-header">Item 01</div>
                                </div>
                                <div _ngcontent-c2="" class="flex-grow-1 navbar-item">
                                    <div _ngcontent-c2="" class="main">Item 02</div>
                                    <div _ngcontent-c2="" class="sub-header">Item 02</div>
                                </div>
                                <div _ngcontent-c2="" class="flex-grow-1 navbar-item">
                                    <div _ngcontent-c2="" class="main">Item 03</div>
                                    <div _ngcontent-c2="" class="sub-header">Item 03</div>
                                </div>
                                <div _ngcontent-c2="" class="flex-grow-1 navbar-item">
                                    <div _ngcontent-c2="" class="main">Item 04</div>
                                    <div _ngcontent-c2="" class="sub-header">Item 04</div>
                                </div>
                            </div>
                        </div>
                        <div _ngcontent-c2="" class="navbar-divider"></div>
                    </div>
                </navigation-bar>
            </div>
            <div _ngcontent-c1="" class="app-content-container">
                <div _ngcontent-c1="" class="col-lg-8 col-md-10 offset-lg-2 offset-md-1">
                    <div _ngcontent-c1="" class="row"> What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum </div>
                    <div _ngcontent-c1="" class="row"> What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum </div>
              

                </div>
            </div>
            <div _ngcontent-c1="" class="app-footer"></div>
        </div>
    </authorize-layout>
</body>

Tested with IE11, Firefox & Chrome. Hope it helps. :)

Thank you, this is what I needed :D. Actually, while waiting for this solution, I had to use javascript to help me to keep my layout. — Redplane, Nov 06 '18 at 03:51

Flex layout holy grail content doesn't grow on IE11

1 Answers1