Flex items won't vertically expand to accommodate contents

Question

The sections of my site are stacked vertically, and the content within each section is vertically and horizontally centered with flexbox.

Each section should fill up the entire screen at minimum, but grow vertically if the contents don't fit. The following works in all major browsers except IE11 (a fiddle if you prefer).

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

body {
  /* comment the following out to see the desired outcome */
  /* display: flex;
  flex-direction: column; */
}

section {
  /* relevant stuff */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100%;
  
  /* unimportant aesthetic stuff */
  border: 1px solid white;
  background: #442;
  color: white;
  font-family: Calibri;
  font-size: 35px;
  padding: 0px 100px;
}


/* more unimportant aesthetic stuff */
section:nth-of-type(2n) {
  background: #553;
}


  I'm a section. Scroll down.


  I'm another section. Keep scrolling.


  The next section will expand to accommodate its contents.


  
 .

.

.

.

.

.

.

.

.
 

.

.

.

.

.

.

.

.
 

.

.

.

.

.

.

.

.
 

.




  If only it was this easy.

Because of IE11's min-height bug, I used the well-known workaround of wrapping my flex container in another flex container. But now my sections no longer expand to accommodate their contents (a fiddle if you prefer).

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

body {
  /* comment the following out to see the desired outcome */
  display: flex;
  flex-direction: column;
}

section {
  /* relevant stuff */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100%;
  
  /* unimportant aesthetic stuff */
  border: 1px solid white;
  background: #442;
  color: white;
  font-family: Calibri;
  font-size: 35px;
  padding: 0px 100px;
}


/* more unimportant aesthetic stuff */
section:nth-of-type(2n) {
  background: #553;
}
body {
  background: black;
}


  I'm a section. Scroll down.


  I'm another section. Keep scrolling.


  How did these dots get on me?


  
 .

.

.

.

.

.

.

.

.
 

.

.

.

.

.

.

.

.
 

.

.

.

.

.

.

.

.
 

.


  


  The sections aren't expanding!

What's a clean solution that will work in IE11? It should give me the same result as the first code snippet, but in IE11.

Michael Benjamin · Accepted Answer

Instead of using standard percentages, which often rely on the specified height of the parent element, and render differently among browsers, consider using viewport percentage units, which rely simply on the viewport dimensions.

This should be all you need. Tested in Chrome, FF and IE11.

body {
  margin: 0;
  display: flex;
  flex-direction: column;
}

section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;  /* NEW */
  
  /* unimportant aesthetic stuff */
  border: 1px solid white;
  background: #442;
  color: white;
  font-family: Calibri;
  font-size: 35px;
  padding: 0px 100px;
}

/* more unimportant aesthetic stuff */
section:nth-of-type(2n) {
  background: #553;
}


  I'm a section. Scroll down.


  I'm another section. Keep scrolling.


  The next section will expand
to accommodate its contents.


  
 .

.

.

.

.

.

.

.

.
 

.

.

.

.

.

.

.

.
 

.

.

.

.

.

.

.

.
 

.




  If only it was this easy.

Revised Fiddle

From the spec:

5.1.2. Viewport-percentage lengths: the vw, vh, vmin, vmax units

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.

vw unit - Equal to 1% of the width of the initial containing block.

vh unit - Equal to 1% of the height of the initial containing block.

vmin unit - Equal to the smaller of vw or vh.

vmax unit - Equal to the larger of vw or vh.

Flex items won't vertically expand to accommodate contents

Answers (1)

Revised Fiddle

Related Questions

Flex items won&#39;t vertically expand to accommodate contents

Answers (1)

Revised Fiddle

Related Questions

Flex items won't vertically expand to accommodate contents