flexbugs
flexbugs copied to clipboard
philipwalton
flex-items not stretched when flex container has scroll
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 of it.
<!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>
.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;
}
Interesting. It's kind of strange that this works. Have you reported this, or have you seen bug reports on any browser bug tracker about this?
Just created:
- https://bugzilla.mozilla.org/show_bug.cgi?id=1267060
- https://bugs.chromium.org/p/chromium/issues/detail?id=606193
- https://bugs.webkit.org/show_bug.cgi?id=156958
Why would you expect scrollHeight to affect the height of the flex line? Note https://drafts.csswg.org/css-flexbox/#flex-lines:
"In a single-line flex container, the cross size of the line is the cross size of the flex container[...]." As a result, when stretch alignment gets applied to the children, they get the 50vh height. Maybe you want align-items: flex-start?
