Closed Bug 1267060 Opened 8 years ago Closed 7 years ago

flex-items not stretched when flex container has scroll

Categories

(Core :: Layout, defect)

Product:
Core
Component:
Layout
Version:
45 Branch
Platform:
x86_64
macOS
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED INVALID

People

(Reporter: i.Safareli, Unassigned)

References

(
URL
)

Details

(Keywords: testcase) 

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.112 Safari/537.36

Steps to reproduce:

Here we have `.parent` flex-container with `height:50vh`  and `overflow:auto`. it has two children.
in `.child2` we have some `.content` and it's height is 100vh. so `.parent` is scrollable and i's scrollHeight is 100vh.



here is an [example](https://jsbin.com/dosapepeju/edit?html,css,output) of it.

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="parent">
  <div class="child child1"></div>
  <div class="child child2">
    <div class="content"></div>
  </div>
</div>
</body>
</html>
```


```css
.parent{
  height: 50vh;
  background: gray;
  display: flex;
  overflow: auto;
  
}


/* uncomment this declarations to make children of .parent stretch correctly */
/*
.parent {
  flex-wrap: wrap;
}
.parent::after{
  content:'';
  display:block;
  height: 0;
  width:100%;
}
*/


.child2 {
  background: linear-gradient(blue, red);
}

.child1 {
  background: linear-gradient(orange, green);

}

.child{
  display: block;
  flex: 1 1 50%;
}

.content{
 height: 100vh; 
}
```


Actual results:

height of flex-items:`.child1` and `.child2` will not be 100vh instead they will stay 50vh as if `.parent`'s height is still 50vh.


Expected results:

height of flex-items:`.child1` and `.child2` should be 100vh
OS: Unspecified → Mac OS X
Hardware: Unspecified → x86_64
Component: Untriaged → Layout
Keywords: testcase
Product: Firefox → Core
Also here is an [issue](https://github.com/philipwalton/flexbugs/issues/141) on flexbugs.
I think the layout for the given testcase is correct per spec.
¶8 (flex container has height:50vh) and ¶11 (item has height:auto
and align-self:auto (used value is 'stretch')) specifically.
https://drafts.csswg.org/css-flexbox/#algo-cross-line
Flags: needinfo?(dholbert)
Sorry for not noticing this bug back when you filed it!

As mats says, our behavior here is indeed correct per-spec.  The key difference here (in Firefox) is the presence or absence of "flex-wrap: wrap".

This all depends on what the height of the "flex line" is, because the flex items here have "height:auto" and "align-self:stretch" (by default), which means they'll take their flex line's height. 

So, how tall is the flex line? Here's what the spec says:
If the flex container is single-line (i.e. has the default "flex-wrap: nowrap"), then this spec text applies:
 # If the flex container is single-line and has a definite cross size,
 # the cross size of the flex line is the flex container’s inner cross size.
https://drafts.csswg.org/css-flexbox-1/#algo-cross-line

In contrast, if the flex container is multi-line (i.e. has "flex-wrap: wrap"), then the line's height is instead taken from the "hypothetical cross size" of its items, as described right after the above-quoted spec text. (And the definition of "hypothetical cross size" says it's the result of performing layout on the flex item, and that lets the height:auto resolve to the height of its child, which is tall.)


So, bottom-line: in the single-line case, the line (and its items) take the flex container's specified height, which makes it short. In the multi-line case, the line gets its size *from laying out* the items, which makes it tall.
Status: UNCONFIRMED → RESOLVED
Closed: 7 years ago
Flags: needinfo?(dholbert)
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.