2

I am having a really hard time getting Chrome and IE11 to display a flex setup in the same way. For the footer to behave as intended in IE I need to use flex-basis: auto which in turn breaks the justify-content: center rule in the .middle class in Chrome. Firefox works as intended either way.

Why does the flex-basis: auto in Chrome behave differently from Firefox and IE as demonstrated in this pen: https://codepen.io/ninja59/pen/GzpOjO

In Chrome the desired result is achieved by removing auto in .content class but this results in footer being always at exactly 100vh as the page is rendered in IE. With long pages the content in the .content div then overlaps the footer when pages are overflowing.

So in summary:
only IE requires flex-basis: auto for footer to work as intended and
only in Chrome the auto setting breaks justify-content: center;

html,
body {
  height: 100%;
}

.container {
  display: flex;
  flex-direction: column;
  height: inherit;
  overflow: auto;
}

.content {
  flex: 1 0 auto;
}

.contentwrapper {
  height: 100%;
  text-align: center;
}

.middle {
  height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inner {
  width: 320px;
  background-color: red;
  line-height: 100px;
}

footer {
  padding: 1rem;
  background-color: gray;
  text-align: center;
  flex-shrink: 0;
}
<div class="container">
  <div class="content">

    <div class="contentwrapper">
      <div class="middle">
        <div class="inner">
          box
        </div>
      </div>
    </div>

    <footer>
      footer
    </footer>

  </div>
</div>
ninja59
  • 21
  • 2
  • `flex-basis: auto` in this case is the equivalent of `height: auto`, which is an invalid parent reference for percentage heights in Chrome. In other words, `.contentwrapper`, with `height: 100%`, needs a defined `height` on the parent (`.content`), and `auto` is not sufficient. See the duplicate for a more complete explanation. I also posted another duplicate that may help you achieve your layout more effectively. – Michael Benjamin Jan 24 '19 at 23:35

1 Answers1

0

I think this codepen will help you.

Example of the FlexBox

You have to change some class.

html,
body {
  height: 100%;
  margin: 0px;
}

.container {  
  height: 100%;
}

.content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.contentwrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
}

.middle {
  height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.inner {
  width: 320px;
  background-color: red;
  line-height: 100px;
}

footer {
  padding: 1rem;
  background-color: gray;
  text-align: center;
  flex-shrink: 0;
}

Also this very good to understand flexbox

Fernando Poli
  • 41
  • 1
  • 5