Flexbox IE11 bug:flex child填充父母的100%高度;不会扩展或收缩内容

时间:2015-11-30 21:29:02

标签: css css3 internet-explorer-11 flexbox

我已经看到很多线程,人们在谈论他们的flex子元素而不是填充父高,但我有完全相反的问题:在IE11中,孩子我的display: flex容器完全填满了高度,即使它只是一行文本。类似地,即使有九个段落的文本,子元素仍然只达到高度的100%,而不是拉伸来包装内容。

如果你有IE11,你可以测试JSFiddle here或下面的片段;它在最新版本的Chrome& FF。

我知道关于numberissues Flexbox in IE11,我经常看到的解决方案是为有问题的孩子设置明确的高度;但是,内容是动态的,因此设置高度是不可能的。我也尝试了各种flex-grow/-shrink/-basis值,但无济于事。

考虑到所有这一点,我在这种情况下使用flexbox的唯一原因是将灯箱垂直居中在屏幕内。如果我为了IE11而放弃了flexbox( ugh ...),那么我可以忍受它。

@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>

2 个答案:

答案 0 :(得分:4)

这是一个可能适合您的解决方案:

align-items: center应用于Flex容器(.lightboxoverlay

OR

align-self: center到弹性项目(.lightbox)。

DEMO

还有两件事需要考虑:

  1. 创建弹性容器时,会有几个默认规则发挥作用。

    一个这样的规则是flex-direction: row,它为弹性项设置水平对齐。

    另一个默认规则是align-items: stretch,它告诉flex项目沿着cross-axis扩展容器的整个长度。 (我们使用上面建议的代码重写此默认值。)

    your demo中,IE11显然实际正确地粘贴到默认值 - 至少达到一定程度(它扩展了视口的高度,但实际上并非如此)容器)。然而,FF和Chrome在(可能)它们应该伸展时包装内容。

  2. 在浏览器支持数据网站caniuse.com上,Internet Explorer 11向flexbox 显示完全支持,直到最近,当它被降级为<强烈>部分支持,因为存在大量错误&#34;。有关问题列表,请参阅Known Issues标签。

答案 1 :(得分:0)

https://jsfiddle.net/u9zdb7nj/

我刚刚在IE11中遇到过这个问题,只有我的容器有min-heightmax-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;
}