- From: Greg Whitworth <gwhit@microsoft.com>
- Date: Mon, 7 Apr 2014 16:42:01 +0000
- To: fantasai <fantasai@inkedblade.net>, Tab Atkins Jr. <jackalmage@gmail.com>
- CC: "www-style@w3.org" <www-style@w3.org>, "mstensho@opera.com" <mstensho@opera.com>, "ojan@chromium.org" <ojan@chromium.org>
> Hi Rudolph!
> Based on feedback from implementers (mainly MSFT and Mozilla), the
> CSSWG has changed the flex layout algorithm to make this case work.
> It required two rule changes (that apply only to single-line flex
> containers):
> - if the flex container has a definite (specified) height,
> a stretched item is also considered definite and percentages
> inside it will work accordingly
> - if the flex container is auto height, a stretched item is
> considered definite after we have measured the contents of
> the flex items treating any percentage-height children as
> auto-height. This requires a relayout step, but it makes
> height: 100% work as expected on auto-height flex containers.
Hey Fantasai and Tab,
This resolution is specifically scoped to stretched flex items but we are seeing interop issues pertaining to flex items in a column flex container. Currently IE and Firefox are resolving the % while Chrome is not. Should this resolution pertain to flex items as well. Below is the repro code and here is a fiddle (http://jsfiddle.net/hJe2r/) for you to test with. Also we were curious why this resolution was scoped to a single-line flex container when this could easily be applicable to both single- and mult-line scenarios.
Thanks,
Greg
FLEX REPRO (FOR THE ARCHIVES)
=================
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title></title>
<style type="text/css">
.flex {
display:flex;
flex-direction:column;
height:500px;
}
.item {
flex:1 0 0px;
background:red;
}
.item > div {
height:100%;
background:green;
}
</style>
</head>
<body>
<div class="flex">
<div class="item">
<div></div>
</div>
</div>
</body>
</html>
Received on Monday, 7 April 2014 16:42:31 UTC