Bug 156958
| Summary: | flex-items not stretched when flex container has scroll | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | safareli <i.safareli> |
| Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW | ||
| Severity: | Normal | CC: | simon.fraser |
| Priority: | P2 | ||
| Version: | Safari 9 | ||
| Hardware: | Mac | ||
| OS: | OS X 10.11 | ||
| URL: | https://jsbin.com/dosapepeju/edit?html,css,output | ||
safareli
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. **issue** is that height of flex-items:`.child1` and `.child2` will not be 100vh instead they will stay 50vh as if `.parent`'s height is still 50vh.
**workaround** is to make `.parent` wrap by using it's `::after` pseudo element as flex-item with `height: 0` and `width:100%`.
---
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;
}
```
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |