flex-items not stretched when flex container has scroll #141

safareli · 2016-03-26T14:46:28Z

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; 
}

The text was updated successfully, but these errors were encountered:

philipwalton · 2016-04-18T00:21:01Z

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?

safareli · 2016-04-24T14:41:56Z

Just created:

cbiesinger · 2016-04-27T20:27:51Z

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?

cbiesinger · 2016-04-27T20:29:01Z

But note https://bugs.chromium.org/p/chromium/issues/detail?id=599828

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

flex-items not stretched when flex container has scroll #141

flex-items not stretched when flex container has scroll #141

safareli commented Mar 26, 2016

philipwalton commented Apr 18, 2016

safareli commented Apr 24, 2016 •

edited

Loading

cbiesinger commented Apr 27, 2016

cbiesinger commented Apr 27, 2016

flex-items not stretched when flex container has scroll #141

flex-items not stretched when flex container has scroll #141

Comments

safareli commented Mar 26, 2016

philipwalton commented Apr 18, 2016

safareli commented Apr 24, 2016 • edited Loading

cbiesinger commented Apr 27, 2016

cbiesinger commented Apr 27, 2016

safareli commented Apr 24, 2016 •

edited

Loading