[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