[Webkit-unassigned] [Bug 156958] New: flex-items not stretched when flex container has scroll
bugzilla-daemon at webkit.org
bugzilla-daemon at webkit.org
Sun Apr 24 07:58:08 PDT 2016
https://bugs.webkit.org/show_bug.cgi?id=156958
Bug ID: 156958
Summary: flex-items not stretched when flex container has
scroll
Classification: Unclassified
Product: WebKit
Version: Safari 9
Hardware: Macintosh
OS: OS X 10.11
Status: NEW
Severity: Normal
Priority: P2
Component: Layout and Rendering
Assignee: webkit-unassigned at lists.webkit.org
Reporter: i.safareli at gmail.com
CC: simon.fraser at apple.com
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;
}
```
--
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.webkit.org/pipermail/webkit-unassigned/attachments/20160424/027232b2/attachment-0001.html>
More information about the webkit-unassigned
mailing list