Flexbox IE11 错误：flex child 填充父级的 100% 高度；不会随内容扩展或收缩
Flexbox IE11 bug: flex child is filling 100% height of parent; won't expand or contract with content
我看到很多线程，人们在谈论他们的 flex 子元素 不 填充父高度，但我有完全相反的问题：在 IE11 中，我的 display: flex 容器的子项完全填满了高度，即使它应该只是一行文本。同样，即使有九段文字，子元素仍然只达到100%的高度，而不是拉伸包裹内容。
如果你有 IE11，你可以测试一个 JSFiddle here，或者在下面的代码片段中；它在 Chrome 和 FF 的最新版本中按预期工作。
我知道 number of issues regarding ，我最常看到的解决方案是为相关儿童设置明确的身高；然而，内容是动态的，所以设置高度是不可能的。我也尝试了各种 flex-grow/-shrink/-basis 值，但无济于事。
考虑到所有这些，我在此上下文中使用 flexbox 的唯一原因是将灯箱在屏幕内垂直居中。如果我为了 IE11 (ugh...) 不得不放弃 flexbox，那么我可以接受它。
@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>
这里有一个可能适合您的解决方案：
将 align-items: center 应用于弹性容器 (.lightboxoverlay)
或
align-self: center 到弹性项目 (.lightbox).
还有两件事需要考虑：
当您创建一个 flex 容器时，一些默认规则开始起作用。
其中一个规则是 flex-direction: row，它设置弹性项目的水平对齐方式。
另一个默认规则是align-items: stretch, which tells flex items to expand the full length of the container along the 。 （我们用上面建议的代码覆盖了这个默认值。）
在 your demo 中，IE11 似乎 实际上 正确地遵循默认值 – 至少在一定程度上（它扩展了视口的高度，但不是真的是容器）。但是，FF 和 Chrome 在（也许）它们应该拉伸的时候包装内容。
在浏览器支持数据网站 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 选项卡上获取问题列表。
https://jsfiddle.net/u9zdb7nj/
我刚刚在使用 IE11 时遇到了这个问题，只有我的容器具有 min-height 和 max-height 属性来代替 height。我能够通过让所述容器的子级继承这些属性来解决这个问题。
<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;
}
我看到很多线程，人们在谈论他们的 flex 子元素 不 填充父高度，但我有完全相反的问题：在 IE11 中，我的 display: flex 容器的子项完全填满了高度，即使它应该只是一行文本。同样，即使有九段文字，子元素仍然只达到100%的高度，而不是拉伸包裹内容。
如果你有 IE11，你可以测试一个 JSFiddle here，或者在下面的代码片段中；它在 Chrome 和 FF 的最新版本中按预期工作。
我知道 number of issues regarding flex-grow/-shrink/-basis 值，但无济于事。
考虑到所有这些，我在此上下文中使用 flexbox 的唯一原因是将灯箱在屏幕内垂直居中。如果我为了 IE11 (ugh...) 不得不放弃 flexbox，那么我可以接受它。
@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>
这里有一个可能适合您的解决方案：
将 align-items: center 应用于弹性容器 (.lightboxoverlay)
或
align-self: center 到弹性项目 (.lightbox).
还有两件事需要考虑：
当您创建一个 flex 容器时，一些默认规则开始起作用。
其中一个规则是
flex-direction: row，它设置弹性项目的水平对齐方式。另一个默认规则是
align-items: stretch, which tells flex items to expand the full length of the container along the在 your demo 中，IE11 似乎 实际上 正确地遵循默认值 – 至少在一定程度上（它扩展了视口的高度，但不是真的是容器）。但是，FF 和 Chrome 在（也许）它们应该拉伸的时候包装内容。
在浏览器支持数据网站 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 选项卡上获取问题列表。
https://jsfiddle.net/u9zdb7nj/
我刚刚在使用 IE11 时遇到了这个问题，只有我的容器具有 min-height 和 max-height 属性来代替 height。我能够通过让所述容器的子级继承这些属性来解决这个问题。
<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;
}