Flexbox IE11 bug: flex child is filling 100% height of parent; won't expand or contract with content

Question

I've seen a lot of threads where people are talking about their flex child elements not filling the parent height, but I have the exact opposite problem: in IE11, the child of my display: flex container fills the height completely, even if it's only supposed to be a single line of text. Similarly, even if there are nine paragraphs of text, the child element still only goes to 100% of the height, rather than stretching to wrap the content.

If you have IE11, you can test a JSFiddle here, or in the snippet below; it works as expected in the latest versions of Chrome & FF.

I'm aware of a number of issues regarding Flexbox in IE11, and the solution I've seen most often is to set an explicit height on the child in question; however, the contents are dynamic, so setting a height is out of the question. I've also tried a variety of flex-grow/-shrink/-basis values, but to no avail.

With all of this in mind, the only reason I'm using flexbox in this context is to vertically centre the lightbox within the screen. If I have to abandon flexbox for the sake of IE11 (ugh...), then I can live with it.

@import url('http://fonts.googleapis.com/css?family=Open+Sans');

body {
 margin:    0;
 padding:    0;
 font-family:  'Open Sans';

}

label {
    display: block;
    color: red;
}

.lightboxoverlay {
 visibility:   hidden;
 position:   fixed;
 top:     0;
 left:     0;
 width:    100%;
 height:    100%;
 padding:    0;
 background-color: rgba(0, 0, 0, 0.8);
 text-align:   center;
 overflow-y:   scroll;
 z-index:    9001;
 display:    -webkit-box;
 display:    -ms-flexbox;
 display:    -webkit-flex;
 display:    flex;
 pointer-events: none;
}

.lightboxoverlay .lightbox {
 width:    100%;
 max-width:   8rem;
 margin:    auto;
 padding:    1rem;
 border-radius:  0.500rem;
 background-color: #FFFFFF;
 pointer-events: none;
}

.lightboxtrigger:checked + .lightboxoverlay,
.lightboxtrigger:checked + .lightboxoverlay .lightbox {
 visibility:   visible;
 pointer-events: auto;
}

<label for="shortlightbox">Launch short lightbox</label>
<input type="checkbox" id="shortlightbox" class="lightboxtrigger" />

<div class="lightboxoverlay">
    <div class="lightbox">
        <label for="shortlightbox">Close me</label>
        <p>These are words!</p>
    </div>
</div>

<label for="longlightbox">Launch tall lightbox</label>
<input type="checkbox" id="longlightbox" class="lightboxtrigger" />

<div class="lightboxoverlay">
    <div class="lightbox">
        <label for="longlightbox">Close me</label>
        <p>
    Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>

<p>
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Et harumd und lookum like Greek to me, dereud facilis est er expedit distinct. Nam liber te conscient to factor tum poen legum odioque civiuda. Et tam neque pecun modut est neque nonor et imper ned libidig met, consectetur adipiscing elit, sed ut labore et dolore magna aliquam makes one wonder who would ever read this stuff? Bis nostrud exercitation ullam mmodo consequet.
</p>

<p>
At vver eos et accusam dignissum qui blandit est praesent luptatum delenit aigue excepteur sint occae. Et harumd dereud facilis est er expedit distinct. Nam libe soluta nobis eligent optio est congue nihil impedit doming id Lorem ipsum dolor sit amet, consectetur adipiscing elit, set eiusmod tempor incidunt et labore et dolore magna aliquam. Ut enim ad minim veniam, quis nostrud exerc. Irure dolor in reprehend incididunt ut labore et dolore magna aliqua.
</p>

<p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse molestaie cillum. Tia non ob ea soluad incommod quae egen ium improb fugiend. Officia deserunt mollit anim id est laborum Et harumd dereud facilis est er expedit distinct. Nam liber te conscient to factor tum poen legum odioque civiuda et tam. Neque pecun modut est neque nonor et imper ned libidig met, consectetur adipiscing elit, sed ut labore et dolore magna aliquam is nostrud exercitation ullam mmodo consequet.
</p>

<p>
Duis aute in voluptate velit esse cillum dolore eu fugiat nulla pariatur. At vver eos et accusam dignissum qui blandit est praesent. Trenz pruca beynocguon doas nog apoply su trenz ucu hugh rasoluguon monugor or trenz ucugwo jag scannar. Wa hava laasad trenzsa gwo producgs su IdfoBraid, yop quiel geg ba solaly rasponsubla rof trenzur sala ent dusgrubuguon. Offoctivo immoriatoly, hawrgasi pwicos asi sirucor.Thas sirutciun applios tyu thuso itoms ghuso pwicos gosi sirucor in mixent gosi sirucor ic mixent ples cak ontisi sowios uf Zerm hawr rwivos. Unte af phen neige pheings atoot Prexs eis phat eit sakem eit vory gast te Plok peish ba useing phen roxas. Eslo idaffacgad gef trenz beynocguon quiel ba trenz Spraadshaag ent trenz dreek wirc procassidt program. 
</p>
    </div>
</div>

<p>
    Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>

<p>
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Et harumd und lookum like Greek to me, dereud facilis est er expedit distinct. Nam liber te conscient to factor tum poen legum odioque civiuda. Et tam neque pecun modut est neque nonor et imper ned libidig met, consectetur adipiscing elit, sed ut labore et dolore magna aliquam makes one wonder who would ever read this stuff? Bis nostrud exercitation ullam mmodo consequet.
</p>

<p>
At vver eos et accusam dignissum qui blandit est praesent luptatum delenit aigue excepteur sint occae. Et harumd dereud facilis est er expedit distinct. Nam libe soluta nobis eligent optio est congue nihil impedit doming id Lorem ipsum dolor sit amet, consectetur adipiscing elit, set eiusmod tempor incidunt et labore et dolore magna aliquam. Ut enim ad minim veniam, quis nostrud exerc. Irure dolor in reprehend incididunt ut labore et dolore magna aliqua.
</p>

<p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse molestaie cillum. Tia non ob ea soluad incommod quae egen ium improb fugiend. Officia deserunt mollit anim id est laborum Et harumd dereud facilis est er expedit distinct. Nam liber te conscient to factor tum poen legum odioque civiuda et tam. Neque pecun modut est neque nonor et imper ned libidig met, consectetur adipiscing elit, sed ut labore et dolore magna aliquam is nostrud exercitation ullam mmodo consequet.
</p>

<p>
Duis aute in voluptate velit esse cillum dolore eu fugiat nulla pariatur. At vver eos et accusam dignissum qui blandit est praesent. Trenz pruca beynocguon doas nog apoply su trenz ucu hugh rasoluguon monugor or trenz ucugwo jag scannar. Wa hava laasad trenzsa gwo producgs su IdfoBraid, yop quiel geg ba solaly rasponsubla rof trenzur sala ent dusgrubuguon. Offoctivo immoriatoly, hawrgasi pwicos asi sirucor.Thas sirutciun applios tyu thuso itoms ghuso pwicos gosi sirucor in mixent gosi sirucor ic mixent ples cak ontisi sowios uf Zerm hawr rwivos. Unte af phen neige pheings atoot Prexs eis phat eit sakem eit vory gast te Plok peish ba useing phen roxas. Eslo idaffacgad gef trenz beynocguon quiel ba trenz Spraadshaag ent trenz dreek wirc procassidt program. 
</p>

Answer 1

Here's a solution that may work for you:

Apply align-items: center to the flex container (.lightboxoverlay)

OR

align-self: center to the flex item (.lightbox).

DEMO

Two more things to consider:

1. When you create a flex container several default rules come into play.

   One such rule is flex-direction: row, which sets a horizontal alignment for flex items.

   Another default rule is align-items: stretch, which tells flex items to expand the full length of the container along the cross-axis. (We're overriding this default with the suggested code above.)

   In your demo, it appears IE11 is actually adhering correctly to the default value – at least to a degree (it's extending the height of the viewport, but not really the container). However, FF and Chrome are wrapping content when (maybe) they should be stretching.

2. On the browser support data website caniuse.com, Internet Explorer 11 was showing full support for flexbox until recently, when it was downgraded to partial support due to the "large amount of bugs present". See the Known Issues tab for a list of problems.

Answer 2

https://jsfiddle.net/u9zdb7nj/

I just experienced this issue with IE11, only my container had min-height and max-height properties in lieu of height. I was able to resolve this by having the children of said container inherit these properties.

<div class="parent">
    <div class="child"></div>
</div>


.parent {
    display: flex;
    min-height: 100px;
    max-height: 200px;
    background: green;
}

.child {
    width: 30%;
    min-height: inherit;
    max-height: inherit;
    background: yellow;
}